Html 正文标记外的内容_Html_Css

Html 正文标记外的内容

html css

Html 正文标记外的内容,html,css,Html,Css,我正在使用： html, body { height: 100%; } section { width: 100%; height: 100%; } 下面显示的所有内容似乎都不包括在body标签中，有没有办法纠正这种情况？或者像这样也没关系我尝试更改溢出值并将高度更改为自动，但似乎没有任何效果 <body> <section class="full"> <div class="center"></div

我正在使用：

html, body {
     height: 100%;
}

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

下面显示的所有内容似乎都不包括在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>

您的网页有两个

元素，每个元素的高度为100%，因此第二个元素显示在折叠下方。

您的网页有两个

元素，每个元素的高度为100%，因此第二个元素显示在折叠下方。

这是因为您有一个CSS规则，该规则为标记中的所有

元素提供100%的高度

第一个部分（带有“full”的部分）占据了所有的查看端口高度（这是因为您还提供了

html，body

100%的高度，这是查看端口的实际高度），这使得浏览器添加了一个垂直滚动条，允许您查看其余内容

请参阅此演示。

这是因为您有一个CSS规则，它为标记中的所有

提供100%的高度

第一个部分（带有“full”的部分）占据了所有的查看端口高度（这是因为您还提供了

html，body

100%的高度，这是查看端口的实际高度），这使得浏览器添加了一个垂直滚动条，允许您查看其余内容

参见本演示。

高度

100%

并不意味着“内容的100%高度”，而是“父元素的100%高度”。对于

html

和

body

，视口是父视口。因此，如果您的浏览器窗口是1000像素高，那么这将是

body

的大小

部分

元素与

主体

具有相同的高度（即，每个元素都将有1000个像素）

因此，第一步是删除

高度：100%

所有位置。下一步是告诉我们您想要达到的效果。

高度

100%

并不意味着“内容的100%高度”，而是“父元素的100%高度”。对于

html

和

body

，视口是父视口。因此，如果您的浏览器窗口是1000像素高，那么这将是

body

的大小

部分

元素与

主体

具有相同的高度（即，每个元素都将有1000个像素）

因此，第一步是删除

高度：100%

所有位置。下一步就是告诉我们你想要达到什么效果。

你说的“体外”是什么意思？你没有垂直滚动吗？如果

部分的高度为100%
，所有其他内容都将溢出正文。你想让它做什么？为什么要将截面宽度和高度设置为100%？我觉得这一切都搞砸了。使用chrome中的devtools并选择body标记，html文档的长度为2000px，但正文的长度为1000px（视口高度）。@Steven_Harris_uuzheight
不允许拉伸，因此赋予它100%
将迫使它保持视口大小。也许你想要？你所说的“体外”是什么意思？你没有垂直滚动吗？如果部分的高度为100%
，所有其他内容都将溢出正文。你想让它做什么？为什么要将截面宽度和高度设置为100%？我觉得这一切都搞砸了。使用chrome中的devtools并选择body标记，html文档的长度为2000px，但正文的长度为1000px（视口高度）。@Steven_Harris_uuzheight
不允许拉伸，因此赋予它100%
将迫使它保持视口大小。也许你想要？