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

您不需要任何 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(){

});
于 2013-08-12T00:00:48.230 回答
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;
}
于 2013-08-12T02:52:40.940 回答