为什么不't height: 100%工作扩展divs到屏幕高度?

小开

你还需要在html元素上设置100% height:

html { height:100%; }

小开

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

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

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

小开

最佳答案

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

JsFiddle的例子。

小开

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

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

小开

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

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

小开

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

小开

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

就像这样:

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

小开

_{因为没有人提到这一点。}

现代的方法:

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

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

viewport-percentage长度相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时，它们将相应地缩放。

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

body {
height: 100vh;
}

设置min-height也可以。< >强(例子)< / >强

body {
min-height: 100vh;
}

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

小开

你应该尝试父元素;

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

那么这就足够了:

#s7 {
height: 100%;
}

小开

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

.app {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-y: auto;
}


.full-height {
height: 100%;
}


.test {
width: 10px;
background: red;
}

<div class="app">
<div class="full-height test">
</div>
Scroll works too
</div>

小开

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

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

小开

只要在你的css中使用这个

html, body {
height: 100%;
}

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