1

ビューポートのサイズである div のグリッドを作成したいと考えています。いくつかの基本的な変数を設定するために、幅 7 div、高さ 10 div にしたいとします。

divサイズを設定するためにこれまでに持っているコードは次のとおりです。

function height() {
    var height = $(window).height();
    height = parseInt(height) + 'px';
    $(".page").css('height',height);
}
    $(document).ready(function() {
        height();
        $(window).bind('resize', height);
});

function width() {
    var width = $(window).width();
    width = parseInt(width) + 'px';
    $(".page").css('width',width);
}
$(document).ready(function() {
    width();
    $(window).bind('width', width);
});

現在、2 つの div が重なり合っています。片方は赤、もう片方は黒で、見えるようにしています。div 内にコンテンツを配置できるようにしたい。私もしっかり入れました

body {
    margin: 0px;
}

後で jQuery を使用してスクロール機能を追加する予定ですが、今のところはグリッドを作成する方法が必要です。

編集： 個々のdivはそれぞれビューポートのサイズです

編集：ページの最後にある小さなスクリプトよりもはるかに優れたスクロールにこの便利なプラグイン を使用しました

4

2 に答える 2

3

CSS だけで簡単に実現できるため、これには JavaScript は必要ありません。

HTML

<div id="content1">
  Place your content here.
</div>
<div id="content2">
  Place your content here.
</div>
<div id="content3">
  Place your content here.
</div>

CSS

* {
  margin: 0;
}
html, body {
  height: 100%;
}
#content1,#content2,#content3 {
  min-height: 100%;
  height: auto !important; /*min-height hack*/
  height: 100%;            /*min-height hack*/
}

例 1

3 つのすべての div にはブラウザー ウィンドウのサイズがあり、もちろんそれに応じて調整されます。また、html/css だけでタブからタブに移動するためのアンカー リンクを追加することもできます。

<a href="#content1">Go to Main Element</a>

このようなナビゲーションが必要な場合は、

例 2

PS: 例では、異なる色を入れるためだけにボックスの css を分離しましたが、上に投稿したように使用できます。

私の最初の 2 つのバージョンには何かが欠けていたので、別のフィドルも作成しました。

例 3

この例には 3x2 div (合計 6 つ) がありますが、同じロジックで 7x10 にすることができます。コードで分からないことがあれば遠慮なく質問してください。

また、スクロールをよりスムーズにするためにjQueryを少し追加しました。これはオプションです。削除するだけです

JavaScript (jQuery を含めることを忘れないでください)

var $root = $('html, body');
$('a').click(function () {

    $root.animate({

        scrollLeft: $($.attr(this, 'href')).offset().left,
       scrollTop: $($.attr(this, 'href')).offset().top

    }, 500);

    return false;
});

これがお役に立てば幸いです

編集: コードに jQuery を含め、JavaScript コードを次のようにラップする必要があります。

$(window).load(function(){

});
于 2013-08-12T00:00:48.230 に答える
2

div を画面全体のサイズにしてからオーバーフロー スクロールを行い、次のパネルに移動するか、div のグリッドをビューポートのサイズにするかはわかりません。2番目の場合、これが私の答えです。

フィドルはここにあります：

HTML

<div class="block">01</div>
<div class="block">02</div>
<div class="block">03</div>
<div class="block">04</div>
<div class="block">05</div>
<div class="block">06</div>
<div class="block">07</div>
<div class="block">etc. (to 70)</div>

CSS

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    /* http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
    margin: 0;
} 

html {
    height: 100%;
    background-color: orange;
}

body {
    height: 100%;
    border: 1px solid blue;
}

.block {
    width: 14.285714%%; /* 100/7 */
    float: left;
    height: 10%; /* 100/10 */
    border: 1px solid rgba(255,255,255,.5);
}

今、それがあなたが望んでいたものでないなら、多分これはそうです.

フィドルはここにあります：

HTML

<div id="content1" class="block">
    <h2>block 01</h2>
</div>

<div id="content2" class="block">
    <h2>block 02</h2>
</div>

<div id="content3" class="block">
    <h2>block 03</h2>
</div>

<div id="content4" class="block">
    <h2>block 04</h2>
</div>

<div id="content5" class="block">
    <h2>block 05</h2>
</div>

<div id="content6" class="block">
    <h2>block 06</h2>
</div>

<div id="content7" class="block">
    <h2>block 07</h2>
</div>

<div id="content8" class="block">
    <h2>block 08</h2>
</div>

<!-- you'll need 70... ? -->

<nav class="global-nav">
    <a href="#content1">01</a>
    <a href="#content2">02</a>
    <a href="#content3">03</a>
    <a href="#content4">04</a>
    <a href="#content5">05</a>
    <a href="#content6">06</a>
    <a href="#content7">07</a>
    <a href="#content8">08</a>
</nav>

CSS (迅速化のためにここに小さな SASS を入れます)

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    margin: 0;
}

html, body {
  height: 100%;
}

html {
    width: 700%;
    /* overflow: hidden; */
    /*This would hide the scroll bars but I'm leaving them for you to see */
}

.block {
     min-height: 100%;
     height: auto !important; /*min-height hack*/
     height: 100%;            /*min-height hack*/

     width: 100%/7;  /* SASS division to be quick*/
     float: left;
     border: 1px solid red;
}

.global-nav {
    position: fixed;
    bottom: 0;
    left: 0;
}

.global-nav a {
    display: block;
    color: black;
}
于 2013-08-12T02:52:40.940 に答える