为什么height: 100%不能将div扩展到屏幕高度?

我想让旋转木马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元素上设置100%的高度:

html { height:100%; }

2011-08-13 10:25:35

在页面源代码中，我看到以下内容:

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

如果您将高度值放在标记中，它将使用此值而不是css文件中定义的高度。

2011-08-13 10:31:04

为了使百分比值适用于高度，必须确定父节点的高度。唯一的例外是根元素<html>，它可以是一个百分比高度。

所以，你已经给了你所有的元素高度，除了<html>，所以你应该做的是添加这个:

html {
    height: 100%;
}

您的代码应该可以正常工作。 * {padding: 0;保证金:0;｝ Html, body， #fullheight { Min-height: 100%重要; 高度:100%; ｝ # fullheight { 宽度:250 px; 背景:蓝色; ｝ < div id = fullheight > Lorem Ipsum < / div >

JsFiddle例子。

2011-08-13 10:34:20

例如，如果你想要左列(height 100%)和内容(height auto) 你可以用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>

2012-07-19 08:54:49

这可能不是理想的，但你总是可以用javascript来做。或者在我的例子中是jQuery

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

2013-04-18 18:42:42

或者，如果你使用position: absolute，那么height: 100%也可以。

2013-06-19 18:08:33

如果你将元素放置在div中，你可以将顶部和底部的填充设置为50%。

就像这样:

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

2014-08-13 17:25:16

因为没有人提到这一点。

现代的方法:

除了将html/body元素的高度设置为100%，你还可以使用viewport-percentage length:

5.1.2. 视口百分比长度:“vw”，“vh”，“vmin”，“vmax”单位 viewport-percentage长度相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时，它们将相应地缩放。

在这个例子中，你可以使用值100vh(这是视口的高度)-(示例)

body {
    height: 100vh;
}

设置最小高度也可以。(例子)

body {
    min-height: 100vh;
}

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

2015-01-24 01:14:00

你应该尝试父元素;

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

那么这就足够了:

#s7 {
   height: 100%;
}

2015-05-20 21:13:15

对于不想使用html, body， .blah {height: 100%}的人，这里有另一个解决方案。

.app { 位置:固定; 左:0; 右:0; 上图:0; 底部:0; overflow-y:汽车; ｝ .full-height { 高度:100%; ｝ test { 宽度:10 px; 背景:红色; ｝ < div class = "应用" > <div class="全高测试"> < / div > 滚动也可以 < / div >

2020-05-28 19:37:47

也可以尝试使用calc和overflow函数

.myClassName {
    overflow: auto;
    height: calc(100% - 1.5em);
}

2020-12-03 21:31:17

在css中使用这个

html, body {
   height: 100%;
}

你将能够看到所有子类的100%高度。

2022-10-06 04:50:49

为什么height: 100%不能将div扩展到屏幕高度?

推荐文章

最新文章

标签