Question

我在页面上遇到了其中一个元素的小问题。我有一个侧边栏，我试图通过使用以下CSS来跨越页面的高度：

#sidebar {
    width: 180px;
    padding: 10px;
    position: absolute;
    top: 50px;
    bottom: 0;
    float: left;
    background: #eee;
    color: #666;
}

相应的CSS几乎是您所期望的：

<div id="header">
    The header which takes up 50px in height
</div>
<div id="main-container">
    <div id="sidebar">
        The sidebar in question
    </div>
    <div id="main-content">
        The rest of my page
    </div>
</div>

代码大部分都按预期工作。当页面呈现时，它跨越100％的高度（从顶部减去50px）。问题是它基本上将盒子分配给窗口的确切高度，以便我向下滚动盒子滚动而不是保持锁定到窗口的底部。有任何想法如何解决这个问题？

Answer 1

如果您希望将position:fixed修复到某个位置，则必须使用sidebar：

#sidebar {
    width: 180px;
    padding: 10px;
    position: fixed;
    top: 50px;
    bottom: 0;
    background: #eee;
    color: #666;
}

JSFiddle

另一种方法是提供给父容器 position:relative，以及他的孩子 position:absolute - 但是父母必须有一些height所以子元素占据了它的高度。

html,body{
    position:relative;
    height:100%; /* some height */
}

#sidebar{
    width: 180px;
    padding: 10px;
    position: absolute;
    top: 50px;
    bottom: 0;
    background: #eee;
    color: #666;
}

JSFiddle

检查learnlayout以了解有关定位的更多信息。

Answer 2

使用css position:fixed修复侧栏。

为了根据屏幕高度锁定高度，我会使用javascript / jquery：

$(function(){
    // assign to resize 
    $(window).resize(set_height);
});

function set_height() {
    $('#sidebar_id').height($(window).height());
}

希望有所帮助

Answer 3

首先，我不明白当没有定义高度时它是如何跨越100％的高度。

其次使用position: fixed而不是绝对。

在第二个注释中，我想推荐一些更合适的定位方法。在主容器div的末尾，在它关闭标记之前，把它放在

<div style="clear: both;"></div>

并使主容器也向左浮动，或者向右浮动，如果它没有给你你想要的。令人惊讶的是，这样的常见布局如何正确地做起来感觉很棘手。（至少对我们这样的新手来说）。我可能错了，这可能不是更好的方式，但这是我做的方式。您添加的额外div是为了使浮动div占用空间，除此之外如果它不起作用，给侧栏高度100％，或者如果你认为它会溢出，告诉我我会添加到我的答案

即使用户滚动，如何将侧边栏锁定到窗口的高度？

3 个答案: