左侧是流畅的侧边栏，右侧是内容；不会以 100% 的宽度并排浮动答案

【问题标题】：Fluid sidebar on left with content on right; won't float next to each other with 100% width左侧是流畅的侧边栏，右侧是内容；不会以 100% 的宽度并排浮动
【发布时间】：2014-05-20 07:37:58
【问题描述】：

我遇到了流畅的侧边栏和旁边的内容框的问题。

我根据自己的喜好设计了左侧#sidebar，但不是我无法制作一个填满旁边剩余空间的内容框。

我想让整个项目占据 100% 的页面宽度。问题来自我侧边栏的最小/最大宽度。

一整天都在努力，但仍然遇到问题，中间有空隙，重叠等。

http://jsfiddle.net/DrDavidBowman01/PjLgE/

CSS

#container {  
width: 100%;
display: block;
height: 100%;
    }
#sidebar {
display: block;
width: 22%;
float:left;
min-width: 236px;
max-width: 332px;
height: 100%;
position: fixed;
border: 2px solid #0C6;
background-color: #000;
}
#content {
width: 88%;
height: 400px;
border: 6px solid #F00;
display: block;
color: #fff;
float: left;
position: relative;
max-width: calc(88% - 236px);
min-width: calc(88% - 332px);
}

HTML

<div id="container">
<div id="sidebar"></div>
<div id="content"></div>
</div>

【问题讨论】：

标签： html css width percentage

【解决方案1】：

这是两件事的结合。首先，如果你想让 div 占据 100% 的高度，那么你还需要设置 body 和 html。

html, body {
    height: 100%;
}

其次，您已将侧边栏设置为position: fixed。这就像在上面设置了position: absolute。如果您希望侧边栏始终可见，您可以在#content 上执行margin-left: 22%;（或任何侧边栏的宽度）。如果您希望侧边栏与页面的其余部分一起流动，只需移除固定位置即可。

【讨论】：

在那个问题上有点面对自己。
你很好，块元素高度是一个常见的误解，因为它们的高度是由其 子元素的相对高度之和决定的。与块元素的宽度相比，它的父元素的全宽。

【解决方案2】：

这是因为您的侧边栏是position: fixed。最好的方法是将侧边栏相对定位/浮动到 100% 的高度，并在其中放置一个固定的包装器。

basic demo

【讨论】：