0

我在用着：

html, body {
     height: 100%;
}

section {
     width: 100%;
     height: 100%;
}

似乎 .full 下面出现的所有内容都没有包含在 body 标签中，有没有办法纠正这个问题？还是这样也无所谓。

我尝试更改溢出值并将高度更改为自动，但似乎没有任何效果。

<body>

<section class="full">

     <div class="center"></div>

</section> <!-- Everything below here appears outside <body> -->

<section class="main">

<header>
<!-- Nav goes here -->
</header>

<content>
<!-- Main divs are here -->
</content>

</section> 

</body>
4

3 回答 3

3

这是因为您有一个 CSS 规则，它为<section>标记中的所有 ' 提供 100% 的高度。

第一部分（带有“完整”的部分）获取所有视口高度（这可能只是因为您还提供了html,body100% 高度 - 这是视口的实际高度），导致浏览器添加一个垂直滚动，允许您查看其余内容。

在此处查看此演示。

于 2013-09-13T13:15:45.833 回答
1

您的网页有两个<section>元素，每个元素的高度均为 100%，因此第二个元素出现在首屏下方。

于 2013-09-13T13:15:02.147 回答
0

高度100%不是“内容的 100% 高度”，而是“父元素高度的 100%”。对于html和body，视口是父级。因此，如果您的浏览器窗口为 1000 像素高，则为body.

section元素获得相同的高度（body即它们每个都是 1000 像素）。

所以第一步是删除height: 100%无处不在。下一步就是告诉我们您想要达到的效果。

于 2013-09-13T13:29:21.447 回答