身高：100％不能工作 [英] height: 100% not working
问题描述
我希望传送带DIV（s7）扩展到整个屏幕的高度。我不知道为什么它没有成功。要查看该页面，您可以此处。
body {height：100％;颜色：#FFF; font：normal 28px / 28px'HelveticaWorldRegular'，Helvetica，Arial，Sans-Serif;背景：＃222 url（''）no-repeat center center fixed;溢出：隐藏; background-size：cover;保证金：0; padding：0;}。holder {height：100％; margin：auto;}＃s7 {width：100％;身高：100％：边距：自动;溢出：隐藏; z-index：1;}＃s7 #posts {width：100％;最小高度：100％;颜色：#FFF; font-size：13px; text-align：left; line-height：16px;保证金：汽车;背景：#AAA;}
< div class = NAV> < a class =prev2id =prev2href =＃> < img src =http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png> < / A> < a class =next2id =next2href =＃> < img src =http://static.tumblr.com/ux4v5bf/swslogxmg/right.png> < / a>< / div>< div class =持有人> < TR> < TD> < div id =s7> {block：Posts}< div id =posts>
h2_lin>解决方案
为了使百分比值适用于身高，必须确定父母的身高。唯一的例外是根元素< html> ，它可以是百分比高度。 。
因此，除了< html> ，你已经给出了所有元素的高度，所以你应该做的是添加这个：
html {
height：100％;
}
你的代码应该可以正常工作。
* {padding：0;保证金：0; } html，body，#fullheight {min-height：100％！important; height：100％;}＃fullheight {width：250px;背景：blue;}
< div id = fullheight> Lorem Ipsum< / div>
=http://jsfiddle.net/MadaraUchiha/KfjGU/ =noreferrer> JsFiddle示例 。
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>
这篇关于身高：100％不能工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
