html - HTML - 身体向下伸展的网页示例？

Question

在 Microsoft 的主页 (http://www.microsoft.com/en-us/default.aspx) 中，您是否看到白色背景一直延伸到底部而两侧为灰色？

你如何在 HTML/CSS 中做到这一点？我的意思是，我一直在尝试，但 DIV 不会一直下降......

帮助？

score 1 · Accepted Answer

好吧，他们的页面有足够的内容来强制页面滚动。像这样

如果没有足够的内容，可以将 div 的高度设置为 100%。这里要注意的重要一点是，它将是其父级高度的 100%。这就是为什么您也必须将 html 和正文高度设置为 100%。演示

html, body {
  height: 100%;
}
#contentDiv {
    height:100%;
}

HTML

<body>
    <div id="contentDiv">my content here</div>
</body>

score 0 · Accepted Answer

您必须确保 body 和 html 文件也具有 100% 的高度，因为 100% 是它从父元素的当前高度得到的，所以如果你设置，并且 html 的父级是窗口（文档），这就是你得到一个全高

html,body{
height:100%;
width:100%;
background:gray;
}
div{
height:100%;
width:100%;
background:red;
}

你会得到一个红页

score 0 · Accepted Answer

将高度设置为 %100，有时将父元素设置为 position:relative 会使事情变得简单。发布您的 html 和 css，我们可以为您提供更好的帮助。

3 回答 3