Question

我正在使用：

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>

Answer 1

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

第一部分（带有'full'）获取所有视口高度（这可能只是因为你还给了html,body 100％高度 - 这是视口的实际高度），导致浏览器添加垂直滚动，以便您查看其余内容。

请参阅此演示here。

Answer 2

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

Answer 3

100%的高度并不意味着“内容的100％高度”，而是“父元素高度的100％”。对于html和body，视口是父视图。因此，如果您的浏览器窗口高度为1000像素，则大小为body。

section元素与body的高度相同（即每个元素都是1000像素）。

所以第一步是删除所有地方的height: 100%。接下来的步骤就是告诉我们你想要达到的效果。

身体标签外的内容

3 个答案: