右边有内容的左侧流体边栏;将不会漂浮在彼此旁边，宽度为100％

我遇到了流体边栏和旁边有内容框的问题。右边有内容的左侧流体边栏;将不会漂浮在彼此旁边，宽度为100％

我设计了我的左侧#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>

来源

2014-04-07 user3504428

这是两件事情的组合。首先，如果你想让divs占用100％的高度，那么你需要设置body和html。

html, body { 
    height: 100%; 
}

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

来源

2014-04-07 21:06:20

明白了。十分感谢。欣赏它。 – user3504428

有趣的是，我自己在那边。 – user3504428

你很好，块元素的高度是一个常见的误解，因为它们的高度是由其_children_的相对高度的总和决定的。与块元素的宽度相比_parent_元素的宽度。 –

这是因为你的侧边栏position: fixed。最佳路线是相对将侧边栏定位/浮动到100％的高度，并在其中放置固定的包装。

basic demo

来源

2014-04-07 21:00:16

右边有内容的左侧流体边栏;将不会漂浮在彼此旁边，宽度为100％

回答

相关问题