Question

我遇到了一个令人困惑的问题，我不太清楚如何解决。我有一个侧边栏和一个主要区域。侧边栏的宽度为25％，最大宽度为350px。其余部分由主区域（宽度：自动）占用。无论用户滚动多少，侧边栏都需要有100％的高度，并始终保持原样。

如果我有一个固定宽度的侧边栏，我可以做这样的事情（demo here）：

div#sidebar {
    width: 350px;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%
}

div#main {
    width: auto;
    margin-left: 350px;
}

但是，由于我不知道我的侧边栏有多宽，我不知道要添加到我的主要内容区域的余量。

有什么想法吗？

Answer 1

我认为这就是您要找的内容，请参阅demo fiddle。

CSS：

html,
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
#sidebar {
    float: left;
    width: 25%;
    max-width: 350px;
    height: 100%;
    overflow: hidden;
}
#main {
    overflow-x: hidden;
    overflow-y: auto; 
    height: 100%;  
}

HTML：

<div id="sidebar">

</div>
<div id="main">

</div>

具有流体宽度的静态侧边栏

1 个答案: