視口大小的div網格

Question

我想制作一個視口大小的div網格。 僅設置一些基本變量，可以說我希望它的寬度為7 divs，高度為10 divs。

這是我到目前為止設置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是視口的大小

編輯：我使用了這個方便的插件進行滾動，比頁面末尾的一個小腳本好得多

Answer 1

您不需要任何JavaScript，因為僅使用CSS即可輕松實現。

的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分開只是為了放置不同的顏色，但是正如我在上面發布的那樣，您可以使用它。

我還為您創建了另一個小提琴，因為我的前兩個版本缺少一些內容……您要求垂直放置幾個div，水平放置幾個。

實施例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(){

});

Answer 2

我不能告訴您是否要使div為屏幕的整個大小，然后使溢出滾動-並轉到下一個面板，或者您是否要使div網格為視口的大小。 如果是第二個，這是我的答案。

小提琴在這里：

的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;
}