身高:100%不能工作

我想旋转木马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"> 

为了使百分比值适用于身高,必须确定父母的身高。 唯一的例外是元素<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> 

由于没有人提到这个

现代方法:

作为将html / body元素的高度设置为100%的替代方法,还可以使用视口百分比长度:

5.1.2。 视口百分比长度:'vw','vh','vmin','vmax'单位

视口百分比长度是相对于初始包含块的大小。 当初始包含块的高度或宽度发生变化时,会相应地缩放。

在这种情况下,您可以使用值100vh (这是视口的高度) – (示例)

 body { height: 100vh; } 

设置min-height也可以。 (例)

 body { min-height: 100vh; } 

大多数现代浏览器都支持这些单元 – 可以在这里找到支持 。

您还需要在html元素上设置100%的高度:

 html { height:100%; } 

另外,如果你使用position: absolute那么height: 100%就可以正常工作。

如果你想,例如,左列(高度100%)和内容(高度自动),你可以使用绝对:

 #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> 

你应该尝试与父母的元素;

 html, body, form { height: 100%; } 

那么这就足够了:

 #s7 { height: 100%; } 

这可能不是理想的,但你可以通过JavaScript来做到这一点。 或者在我的情况下,jQuery

 <script> var newheight = $('.innerdiv').css('height'); $('.mainwrapper').css('height', newheight); </script> 

在页面源中,我看到以下内容:

 <div class="holder"> <div id="s7" style="position: relative; width: 1366px; height: 474px; overflow: hidden;"> 

如果你把标签的高度值,它将使用这个,而不是在CSS文件中定义的高度。

如果您绝对将元素放置在div中,则可以将填充顶部和底部设置为50%。

所以像这样的东西:

 #s7 { position: relative; width:100%; padding: 50% 0; margin:auto; overflow: hidden; z-index:1; }