[英]Sidebar height 100% on div not extending to bottom of page
I've seen several similar questions/answers to this problem on SO but none of the answers that I've checked have helped me. 我在SO上已经看到了几个与此问题类似的问题/答案,但是我检查过的所有答案都没有帮助我。
I'm attempting to have a "Side-Bar" extend from 10px less than the top of the page, all the way to the bottom. 我正在尝试让“边栏”从小于页面顶部的10px一直延伸到底部。
However (when using height:100%), the "Side-Bar" only reaches to the bottom of the loaded browser window, if there is content past the browser window that you scroll down to, the "Side-Bar" ends prematurely. 但是(当使用height:100%时),“ Side-Bar”仅到达加载的浏览器窗口的底部,如果有内容超出您向下滚动到的浏览器窗口,则“ Side-Bar”将提前结束。
Basically, its height is only 100% of the browser window, I desire it to be 100% of the full page content. 基本上,它的高度只是浏览器窗口的100%,我希望它是整个页面内容的100%。
I've created a JSFiddle that shows my problem: 我创建了一个JSFiddle来显示我的问题:
http://jsfiddle.net/qaEzz/1/ http://jsfiddle.net/qaEzz/1/
My CSS: 我的CSS:
#sidebar {
position:absolute;
right:8px;
width:200px;
height:100%;
overflow:hidden;
background-color: yellow;
}
i put the <div id="sidebar"></div>
我把
<div id="sidebar"></div>
into the <div id="content">
进入
<div id="content">
and added in the css 并添加到css中
#topbar {
width:100%; <--this
height:20px;
background-color: red;
}
and this 和这个
#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%
}
If you change position:absolute;
如果您改变
position:absolute;
to position:fixed;
position:fixed;
, then it would stick to its position on the right. ,那么它将坚持在右侧的位置。
For a sidebar that might have a longer length than the browser length itself, instead of the position
attribute, use the float
attribute. 对于可能比浏览器长度本身长的边栏,请使用
float
属性代替position
属性,而不是position
属性。
http://jsfiddle.net/wK2Yh/ http://jsfiddle.net/wK2Yh/
#sidebar {
float:right;
right:8px;
width:200px;
height:100%;
overflow:hidden;
background-color: yellow;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.