Question

我在SO上看到了几个类似的问题/答案，但我检查过的答案都没有帮助过我。

我试图让“Side-Bar”从页面顶部开始延伸10px，一直到底部。

但是（当使用高度：100％时），“侧栏”仅到达加载的浏览器窗口的底部，如果有内容经过您向下滚动到的浏览器窗口，则“侧栏”过早结束。

基本上，它的高度仅为浏览器窗口的100％，我希望它是整页内容的100％。

我创建了一个显示我的问题的JSFiddle：

我的CSS：

#sidebar {
  position:absolute;
  right:8px;
  width:200px;
  height:100%;
  overflow:hidden;
  background-color: yellow;
}

Answer 1

我把<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%
}

这是工作Fiddle

Answer 2

如果您将position:absolute;更改为position:fixed;，那么它会坚持到右侧的位置。

对于长度可能比浏览器长度本身更长的侧边栏，而不是position属性，请使用float属性。

http://jsfiddle.net/wK2Yh/

#sidebar {
    float:right;
    right:8px;
    width:200px;
    height:100%;
    overflow:hidden;
    background-color: yellow;
}

div上的侧边栏高度100％未延伸到页面底部

2 个答案: