身體不是100％身高
[英]body is not 100% height
問題描述
<body>
<div id='top'>this is top</div>
some text...
</body>
CSS
html{
height:100%;
background:green;
}
body{
max-width:50%;
height:100%; //doesn't work
background:red;
margin:0 auto;
}
#top{
height:30px;
background:blue;
}
當body標簽中的some text...足夠長而出現滾動條時， body停止為100％的高度。
無論頁面中有多少文本，我都需要在頁面底部添加彩色的正文。
小提琴在這里
4 個解決方案
解決方案1
2 2013-10-10 14:02:02
您應該使用另一個<div>標簽。
<div id="content">asdomasdosamd oasdimsad </div>
並且也將這個顏色上色：
// css
#content { background: red; }
解決方案2
1 2013-10-10 13:59:52
您需要移除height: 100%; 。 無論隨后的文本量如何，背景顏色將保持紅色。
解決方案3
1 2013-10-10 14:01:27
解決方案4
1 已采納 2013-10-10 14:04:58
這是不使用任何額外元素的解決方案：
body{
max-width:50%;
min-height:100%; // this is for when text does not go down to bottom of page
height: auto; // this is for when text overflows the page
background:red;
margin:0 auto;
}
這是一個工作示例 。
身體不是100％身高，而是100％視口
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.