[英]Set height 100% to absolute div
我有一个侧边栏菜单:
的HTML
<div class="container right-menu">
<nav class="panel-nav">
<ul>
<li><a href="#about us">About us</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contacts">Contacts</a></li>
</ul>
</nav>
</div>
的CSS
.right-menu {
position: relative;
height: 100%;
}
.panel-nav {
position: absolute;
right: 0;
float: right;
width: 195px;
min-height: 100%;
padding: 87px 0 0 21px;
margin-right: -59px;
background: #f6f6f3;
box-shadow: inset 7px 0 5px -6px rgba(0, 0, 0, 0.1);
font-size: 14px;
z-index: 2;
}
我需要做的是panel-nav
是页面的整个高度。 但是现在,此div的高度等于内部内容的高度。 如何解决?
您可以通过将父div的高度从100%
更改为100vh
来100vh
:
.right-menu {
position: relative;
height: 100vh;
}
Jsfiddle: http : //jsfiddle.net/rycpx4g2/
vh
是CSS3测量单位,代表viewport height
您可以在绝对位置元素上设置top: 0
和bottom: 0
,以根据相对定位的父元素实现100%的高度:
.panel-nav {
position: absolute;
top: 0;
bottom: 0;
}
编辑
您可以使用jQuery,并在每次滚动时将新的顶部位置设置为.panel-nav
。
$(window).scroll(function() {
var top = $(window).scrollTop();
$('.panel-nav').css({'top': top + 'px'});
});
#parent { position: relative; border: 1px solid #333; width: 200px; height: 300px; float: left; } #child { position: absolute; top: 0; bottom: 0; width: 100%; background-color: red; }
<div id="parent"> <div id="child"> <ul> <li>text</li> <li>text</li> <li>text</li> <li>text</li> </ul> </div> </div>
看到这个小提琴: http : //jsfiddle.net/Bek9L/1879/
的HTML
<div class="container">
<div class="sidebar">
<p>This is a side bar</p>
</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean condimentum.</div>
</div>
的CSS
html, body{
width: 100%;
margin:0;
padding:0;
}
.container{
border:1px solid red;
position:relative;
}
.content{
width:75%;
margin-left:25%;
}
.sidebar{
position:absolute;
top:0;
left:0;
height:100%;
width:25%;
height:100%;
background:gray;
}
这里的问题是高度,要解决它,将html和body的高度增加到100%
即
html,body{
height:100%;
padding:0;
margin:0;
}
使用position: absolute;
您将不会设置height
值。
您应该使用top: 0, bottom: 0;
达到100%的高度。
如果要确保滚动窗口时此设置不变,请使用position: fixed;
使用这种方法非常容易。步骤1制作一个div孔,然后使用padding-right放置内容,仅步骤2里面的一个div设置一个位置:fixed; 并设置高度和颜色
检查代码并轻松做到这一点enter code here
http://jsfiddle.net/simeon1929/h3sqe9re/15/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.