Question

我想制作一个视口大小的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);
});

现在我只有两个叠在一起的div。一个是红色，一个是黑色，所以我可以看到它们。我希望能够将内容放入div中。我也确保放

body {
    margin: 0px;
}

稍后我将使用jQuery添加一些滚动功能，但是现在我只想要一种方法来制作网格。

修改每个div都是视口的大小

修改我使用 this 方便的插件进行滚动，这比页面末尾的小脚本要好得多

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*/
}

EXAMPLE 1

所有3个div都具有浏览器窗口的大小，当然它们也会相应调整。此外，您还可以添加一个锚链接，以便再次使用html / css

从一个选项卡导航到另一个选项卡

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

如果您希望拥有此类导航，那么您可以查看

<强> EXAMPLE 2

PS：在示例中，我已将盒子的css分开，只是为了放置不同的颜色，但你可以在我上面张贴它。

我也为你创造了另一个小提琴，因为我的前两个版本缺少了一些东西......你垂直地要求几个div，并且水平地要求几个。

<强> EXAMPLE 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网格大小是视。如果是第二个，这是我的答案。

fiddle is here:

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

现在，如果那不是你想要的，也许就是这样。

fiddle is here:

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

视口大小的div网格

2 个答案:

HTML

CSS

现在，如果那不是你想要的，也许就是这样。

HTML

CSS（这里有一点SASS以提高速度）