100％高度部分

Question

我希望制作一个100％width和height的网站部分。我在整个地方看到了这一点（http://danedwards.me，http://tribalmedia.co.uk）。是的，这些都没有完全填满页面，但你明白了。

我不想使用jQuery创建覆盖滚动和所有其他爵士乐的东西。我只是希望有一个简单的HTML和CSS解决方案。

对我来说最大的问题是，当我想在内容中添加内容时，我想要填充。问题是该部分变得大于100％。所以，我从其他问题中获取了代码并拼凑了一个小提琴。滚动时，请注意填充导致该部分大于100％。

主要问题：我是否以正确的方式创建了这些部分？如果是这样，我如何解决填充问题？如果没有，我该怎么办？

小提琴（我的代码）：http://jsfiddle.net/shaansingh/W4EWC/

全屏（此处＆＃39;您将注意到此问题）：http://jsfiddle.net/shaansingh/W4EWC/embedded/result/

Answer 1

将box-sizing:border-box;添加到您的CSS部分：

section {
    padding: 3%;
    box-sizing:border-box;
}

<强> jsFiddle example

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

  

border-box：width和height属性包括padding和   边界，但不是边际。