视口大小的div网格

我想制作一个视口大小的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添加一些滚动function，但是现在我只想要一种方法来制作网格。

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

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

Answer 1

你不需要任何javascript，因为只用CSS就可以轻松实现。

HTML

 
 Place your content here. 
 
 Place your content here. 
 
 Place your content here.  

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从一个选项卡导航到另一个选项卡

 Go to Main Element 

如果这样的导航是您想要的东西，那么您可以查看

例2

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

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

例3

此示例具有3×2 div（总共6个），但使用相同的逻辑可以使它们为7×10。 如果您对代码中的任何内容一无所知，请不要犹豫。

此外，我添加了一些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

 
01
 
02
 
03
 
04
 
05
 
06
 
07
 
etc. (to 70) 

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

 
 
block 01
 
 
 
block 02
 
 
 
block 03
 
 
 
block 04
 
 
 
block 05
 
 
 
block 06
 
 
 
block 07
 
 
 
block 08
 
  
 01 02 03 04 05 06 07 08  

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