[英]Sidebar height 100% on div not extending to bottom of page
我在SO上已经看到了几个与此问题类似的问题/答案,但是我检查过的所有答案都没有帮助我。
我正在尝试让“边栏”从小于页面顶部的10px一直延伸到底部。
但是(当使用height:100%时),“ Side-Bar”仅到达加载的浏览器窗口的底部,如果有内容超出您向下滚动到的浏览器窗口,则“ Side-Bar”将提前结束。
基本上,它的高度只是浏览器窗口的100%,我希望它是整个页面内容的100%。
我创建了一个JSFiddle来显示我的问题:
我的CSS:
#sidebar {
position:absolute;
right:8px;
width:200px;
height:100%;
overflow:hidden;
background-color: yellow;
}
我把<div id="sidebar"></div>
进入<div id="content">
并添加到css中
#topbar {
width:100%; <--this
height:20px;
background-color: red;
}
和这个
#sidebar {
position:absolute;
right:16px; <--! extended to 16 px
width:200px;
height:100%;
overflow:hidden;
margin-top:-10px; <--!
background-color: yellow;
}
#content {
position: absolute;<--! and remove the marging: 10px just add a <br> in the html
width:100%
}
这是工作中的小提琴
如果您改变position:absolute;
position:fixed;
,那么它将坚持在右侧的位置。
对于可能比浏览器长度本身长的边栏,请使用float
属性代替position
属性,而不是position
属性。
#sidebar {
float:right;
right:8px;
width:200px;
height:100%;
overflow:hidden;
background-color: yellow;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.