我希望旋转木马DIV(s7)扩展到整个屏幕的高度 . 我没有成功.2766153没有成功 . 要查看该页面,您可以去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">
9 回答
为了使百分比值适用于身高,必须确定父亲的身高 . 唯一的例外是 root 元素
<html>
,它可以是百分比高度 . .所以,除了
<html>
之外,你已经给出了所有元素的高度,所以你应该做的就是添加:你的代码应该可以正常工作 .
JsFiddle example .
既然没人提到这个......
现代方法:
作为将
html
/body
元素的高度设置为100%
的替代方法,您还可以使用视口百分比长度:在这种情况下,您可以使用值
100vh
(这是视口的高度) - (example)设置
min-height
也有效 . (example)大多数现代浏览器都支持这些单元 - support can be found here .
您还需要在
html
元素上设置100%高度:或者,如果您使用
position: absolute
,则height: 100%
将正常工作 .你应该尝试使用父元素;
那就足够了:
如果你想要,例如,左列(高度100%)和内容(高度自动)你可以使用绝对:
在HTML中:
这可能不太理想,但你总是可以用javascript做到这一点 . 或者在我的情况下jQuery
在页面源代码中,我看到以下内容:
如果将高度值放在标记中,它将使用此值而不是css文件中定义的高度 .
如果绝对将元素放在div中,可以将填充顶部和底部设置为50% .
所以像这样: