html - 在内容滚动时保持侧边栏固定在顶部

Question

我在使用 html/css 时遇到问题。

你好，有这个设计:

HHHHHHHHHH
CCCCCCCSSS
CCCCCCCSSS
CCCCCCCSSS
CCCCCCCSSS
FFFFFFFFFF

H 是我的页眉，F 是页脚，C 是内容，S 是我的边栏。

我已将页眉固定在顶部，将页脚固定在底部，因此无论我有多少内容，页眉和页脚始终会显示。

由于我的侧边栏只有少量数据，所以我也想固定一下。我希望侧边栏保持在标题下方并且始终可见，即使内容太大并且我需要滚动到页面底部也是如此。

你好有这个代码:

.container {
    min-height:100%;
    position:relative;
}
.header {  
    position: fixed;
    top: 0;
    background:#f1f1f1;
    width: 100%;
    margin: 0px auto;
}
.sidebar {
    float: right;
    width: 300px;
    background-color: #FFF;
    padding:10px;
    padding-bottom: 100px;
    padding-top: 50px;
}
.content {
    width: 960px;
    padding:10px;
    padding-bottom: 100px;
    padding-top: 50px;
    margin-left: 100px;
}
.footer {
    position:fixed;
    bottom:0;
    width:100%;
    height:60px; 
    background:#f1f1f1;
    text-align: center;
    vertical-align: middle;
}

有什么想法吗？

Answer 1

尝试使侧边栏的位置“固定”，同时说明其确切位置。因此，您可以将以下内容添加到 CSS 中的 div 类“sidebar”:

position: fixed;
left: 1110px;
top: 30px;

您可以调整顶部和左侧的位置，使一切都符合您的喜好，但这应该大致将侧边栏放在正确的位置。 :)