我希望旋转木马DIV(s7)扩展到整个屏幕的高度.我不知道它为什么没有成功.要查看该页面,您可以访问此处.
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">Mad*_*iha 368
为了使百分比值适用于身高,必须确定父亲的身高.唯一的例外是根元素<html>,它可以是百分比高度..
所以,除了你之外,你已经给出了所有元素的高度<html>,所以你应该做的就是添加:
html {
height: 100%;
}
你的代码应该可以正常工作.
* { padding: 0; margin: 0; }
html, body, #fullheight {
min-height: 100% !important;
height: 100%;
}
#fullheight {
width: 250px;
background: blue;
}<div id=fullheight>
Lorem Ipsum
</div>Jos*_*ier 133
既然没人提到这个......
作为将html/ bodyelement的高度设置为的替代方法100%,您还可以使用视口百分比长度:
5.1.2.视口百分比长度:'vw','vh','vmin','vmax'单位
视口百分比长度相对于初始包含块的大小.当初始包含块的高度或宽度改变时,它们相应地缩放.
在这种情况下,您可以使用该值100vh(视口的高度) - (示例)
body {
height: 100vh;
}
设置min-height也有效.(例)
body {
min-height: 100vh;
}
大多数现代浏览器都支持这些单元 - 可在此处找到支持.
Ste*_*ber 20
或者,如果你使用position: absolute那么height: 100%将工作得很好.
你应该尝试使用父元素;
html, body, form, main {
height: 100%;
}
那就足够了:
#s7 {
height: 100%;
}
小智 5
例如，如果您想要左列（高度100％）和内容（高度自动），则可以使用absolute：
#left_column {
float:left;
position: absolute;
max-height:100%;
height:auto !important;
height: 100%;
overflow: hidden;
width : 180px; /* for example */
}
#left_column div {
height: 2000px;
}
#right_column {
float:left;
height:100%;
margin-left : 180px; /* left column's width */
}
在html中：
<div id="content">
<div id="left_column">
my navigation content
<div></div>
</div>
<div id="right_column">
my content
</div>
</div>
| 归档时间： |
|
| 查看次数： |
365068 次 |
| 最近记录： |