视口大小的div网格 [英] Grid of divs that are size of viewport

问题描述

我想创建一个尺寸为视口的div网格。只是为了设置几个基本变量，让我想说它是7 divs和10 divs高。

I want to make a grid of divs that are the size of the viewport. Just to set a few basic variables, lets say I want it to be 7 divs wide and 10 divs high.

这里是一个代码，我已经到目前为止设置div size：

Here is a code I have so far to set the div size:

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中。我也一定要把

Right now I just have 2 divs that are stacked on top of each other. One is red and one is black, just so I can see them. I want to be able to put content inside the divs. I also made sure to put

body {
    margin: 0px;
}

稍后我将使用jQuery添加一些滚动功能，想要一种制作网格的方法。

Later I am going to put some scrolling features with jQuery but for now I just want a way to make the grid.

编辑：
每个div都是视口的大小

Each individual div is the size of the viewport

编辑：
我使用 这个 滚动的方便的插件，比页面末尾的小脚本好多了

I used this handy plugin for the scrolling that is much better then a small script at the end of the page

推荐答案

您不需要任何javascript，因为它可以更容易实现与CSS。

You won't need any javascript for this as it can be easier achieved with just 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

CSS

EXAMPLE 1 

示例1

All 3 divs have the size of the browser window and of course they adjust accordingly. Also you can add a anchor link to navigate from tab to tab with again just html/css

所有3个div的大小的浏览器窗口，当然他们相应地进行调整。此外，您还可以添加锚链接，从标签页到标签页，只需html / css

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

If a navigation like this is something you would like to have then you can have a look on the 

如果这样的导航是你想要的，那么你可以看看

EXAMPLE 2

示例2

PS: in the example i have separated the css of the boxes just to put different colors but you can have it as i posted it above.

PS：在示例中，我已经分离的框的CSS只是为了放置不同的颜色，但你可以有它贴在上面。 >

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

I've also created another fiddle for you, as my first two versions were missing something...You asked for a couple of divs vertically and a couple horizontally.

示例3

EXAMPLE 3

此示例具有3x2 divs（总共6个），但使用相同的逻辑，您可以将它们设置为7x10。
请不要犹豫，询问您是否不理解代码中的任何内容。

This example has 3x2 divs (6 total) but with the same logic you can make them 7x10. Please don't hesitate to ask if you don't understand anything in the code.

还添加了一些jQuery来滚动更平滑，这是可选的，您可以直接删除它

Also i've added a bit of jQuery to make the scrolling more smooth, which is optional, you can just remove it

JavaScript （不要忘记包含jQuery）

JavaScript (don't forget to include 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代码：

You need to include jQuery in your code and also wrap the javascript code with:

$(window).load(function(){

});

这篇关于视口大小的div网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！