[英]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">
为了使百分比值适用于身高,必须确定父母的身高。 唯一的例外是根元素<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%
就可以了。
您应该尝试使用父元素;
html, body, form, main {
height: 100%;
}
那么这就足够了:
#s7 {
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>
这可能并不理想,但您始终可以使用 javascript 来实现。 或者在我的情况下 jQuery
<script>
var newheight = $('.innerdiv').css('height');
$('.mainwrapper').css('height', newheight);
</script>
如果你绝对 position 元素里面的 div,你可以设置 padding top 和 bottom 为 50%。
所以是这样的:
#s7 {
position: relative;
width:100%;
padding: 50% 0;
margin:auto;
overflow: hidden;
z-index:1;
}
对于不想使用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>
在页面源中,我看到以下内容:
<div class="holder">
<div id="s7" style="position: relative; width: 1366px; height: 474px; overflow: hidden;">
如果您将高度值放入标签中,它将使用此值而不是 css 文件中定义的高度。
尝试使用calc
和overflow
函数
.myClassName {
overflow: auto;
height: calc(100% - 1.5em);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.