为什么 height: 100% 不能将 div 扩展到屏幕高度? [英] Why doesn't height: 100% work to expand divs to the screen height?
问题描述
我希望轮播 DIV (s7) 扩展到整个屏幕的高度.我不知道为什么它没有成功.要查看该页面,您可以前往此处.
body {高度:100%;颜色:#FFF;字体:普通 28px/28px'HelveticaWorldRegular'、Helvetica、Arial、Sans-Serif;背景:#222 url('') 无重复中心固定;溢出:隐藏;背景尺寸:封面;边距:0;填充:0;}.持有者 {高度:100%;保证金:自动;}#s7 {宽度:100%;高度:100%:边距:自动;溢出:隐藏;z-索引:1;}#s7 #posts {宽度:100%;最小高度:100%;颜色:#FFF;字体大小:13px;文本对齐:左;行高:16px;保证金:自动;背景:#AAA;}
<div class="holder"><tr><td><div id="s7">{块:帖子}<div id="posts">
为了让百分比值适用于身高,必须确定父母的身高.唯一的例外是 root 元素 ,它可以是百分比高度..
所以,除了 <html>
之外,您已经给出了所有元素的高度,所以您应该添加以下内容:
html {高度:100%;}
你的代码应该可以正常工作.
* { padding: 0;边距:0;}HTML,正文,#fullheight {最小高度:100%!重要;高度:100%;}#全高{宽度:250px;背景:蓝色;}
逻辑推理
I want the carousel DIV (s7) to expand to the height of the entire screen. I haven't an idea as to why it's not succeeding. To see the page you can go here.
body {
height: 100%;
color: #FFF;
font: normal 28px/28px'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
background: #222 url('') no-repeat center center fixed;
overflow: hidden;
background-size: cover;
margin: 0;
padding: 0;
}
.holder {
height: 100%;
margin: auto;
}
#s7 {
width: 100%;
height: 100%: margin: auto;
overflow: hidden;
z-index: 1;
}
#s7 #posts {
width: 100%;
min-height: 100%;
color: #FFF;
font-size: 13px;
text-align: left;
line-height: 16px;
margin: auto;
background: #AAA;
}
<div class="nav">
<a class="prev2" id="prev2" href="#">
<img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">
</a>
<a class="next2" id="next2" href="#">
<img src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png">
</a>
</div>
<div class="holder">
<tr>
<td>
<div id="s7">
{block:Posts}
<div id="posts">
In order for a percentage value to work for height, the parent's height must be determined. The only exception is the root element <html>
, which can be a percentage height. .
So, you've given all of your elements height, except for the <html>
, so what you should do is add this:
html {
height: 100%;
}
And your code should work fine.
* { padding: 0; margin: 0; }
html, body, #fullheight {
min-height: 100% !important;
height: 100%;
}
#fullheight {
width: 250px;
background: blue;
}
<div id=fullheight>
Lorem Ipsum
</div>
这篇关于为什么 height: 100% 不能将 div 扩展到屏幕高度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!