為什么 height: 100% 不能將 div 擴展到屏幕高度？
[英]Why doesn't height: 100% work to expand divs to the screen height?
問題描述
我希望輪播 DIV (s7) 擴展到整個屏幕的高度。 我不知道為什么它沒有成功。 要查看該頁面，您可以在這里go 。
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">
11 個解決方案
解決方案1
497 已采納 2011-08-13 10:34:20
為了使百分比值適用於身高，必須確定父母的身高。 唯一的例外是根元素<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>
解決方案2
174 2015-01-24 01:14:00
因為沒有人提到這個..
現代方法：
作為將html / body元素的高度設置為100%的替代方法，您還可以使用視口百分比長度：
5.1.2. 視口百分比長度：'vw'、'vh'、'vmin'、'vmax' 單位
視口百分比長度與初始包含塊的大小有關。 當初始包含塊的高度或寬度發生變化時，它們會相應地縮放。
在這種情況下，您可以使用值100vh （即視口的高度）- （示例）
body {
height: 100vh;
}
設置min-height也有效。 （例子）
body {
min-height: 100vh;
}
大多數現代瀏覽器都支持這些單位 -可以在此處找到支持。
解決方案3
28 2011-08-13 10:25:35
您還需要在html元素上設置 100% 的高度：
html { height:100%; }
解決方案4
25 2013-06-19 18:08:33
或者，如果您使用position: absolute那么height: 100%就可以了。
解決方案5
10 2015-05-20 21:13:15
您應該嘗試使用父元素；
html, body, form, main {
height: 100%;
}
那么這就足夠了：
#s7 {
height: 100%;
}
解決方案6
6 2012-07-19 08:54:49
例如，如果你想要一個左列（高度 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>
解決方案7
2 2013-04-18 18:42:42
這可能並不理想，但您始終可以使用 javascript 來實現。 或者在我的情況下 jQuery
<script>
var newheight = $('.innerdiv').css('height');
$('.mainwrapper').css('height', newheight);
</script>
解決方案8
2 2014-08-13 17:25:16
如果你絕對 position 元素里面的 div，你可以設置 padding top 和 bottom 為 50%。
所以是這樣的：
#s7 {
position: relative;
width:100%;
padding: 50% 0;
margin:auto;
overflow: hidden;
z-index:1;
}
解決方案9
1 2020-05-28 19:37:47
對於不想使用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>
解決方案10
1 2011-08-13 10:31:04
在頁面源中，我看到以下內容：
<div class="holder">
<div id="s7" style="position: relative; width: 1366px; height: 474px; overflow: hidden;">
如果您將高度值放入標簽中，它將使用此值而不是 css 文件中定義的高度。
解決方案11
0 2020-12-03 21:31:17
嘗試使用calc和overflow函數
.myClassName {
overflow: auto;
height: calc(100% - 1.5em);
}
高度為100％時將div設置為高度的100％
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.