内容分区的高度和宽度不是100%

Question

我有两个面板，一个是边栏，100%高，100px宽（紫色），我还有一些按钮（橙色），然后我有一个右面板，顶部div是100%宽，100px高（绿色），这个面板包含3个右浮动按钮（灰色）。

现在在这个顶部面板下方，我有一个内容div，应该是剩余宽度的100%和剩余高度的100%（黄色），但是当您添加更多侧边栏按钮（橙色按钮）时，黄色面板会在底部插入一个白色边框，如果您调整浏览器窗口的大小，它也水平放置，它会在右侧插入一个空白边框， 这个空白是正文，但我很难尝试使内容（黄色）面板适合剩余的宽度和高度。

快速示例：

http://i.stack.imgur.com/g088H.jpg

以下是我到目前为止的工作示例：演示

html {height: 100%;}

body {height: 100%; margin: 0px;}

#container
{
	background-color: #f00;
	height: 100%;
}

#sidebar
{
	background-color: #F0F; /*#E82E11*/
	width: 100px;
	height: 100%;
	float: left;
	padding-top: 100px;	
}

#rightcontent
{
	background-color: #00f;
	width: 100%;
	height: 100%;
	padding-left: 100px;
	box-sizing: border-box;
}

#topcontent
{
	background-color: #0f0;
	width: 100%;
	height: 100px;
	min-width: 380px;
}

#content
{
	background-color: #ff0;
	width: 100%;
	min-height: 100%;
	min-width: 380px;
}

.sidebaroptions
{
background-color: #FF2100;
border: 0px solid #F00;
width: 100%;
height: 80px;
margin: auto;
padding: 10px 0px;
box-sizing: border-box;
cursor: pointer;
color: #FFF;
text-align: center;
}

.sidebaroptions:hover
{
	background-color: #F50000;
	cursor: pointer;
}

.sidebaroptionsselected
{
	background-color: #F50000;
}

.topoptions

{
    width: 120px;
    height: 100px;
    background-color: #3C3C3C;
    color: #FFF;
    box-sizing: border-box;
    text-align: center;
    float: right;
}

.topoptions:hover {
    background-color: #4D4D4D;
    cursor: pointer;
}

<div id="sidebar">
	<div class="sidebaroptions">new</div>
	<div class="sidebaroptions">new</div>
	<div class="sidebaroptions">new</div>
	<div class="sidebaroptions sidebaroptionsselected">new</div>
	<div class="sidebaroptions">new</div>
	<div class="sidebaroptions">new</div>
	<div class="sidebaroptions">new</div>
	<div class="sidebaroptions">new</div>
	<div class="sidebaroptions">new</div>
	<div class="sidebaroptions">new</div>
	</div><!--End of SideBar-->
	
	<div id="rightcontent">
		<div id="topcontent">
			<div class="topoptions">Config</div>
			<div class="topoptions">Config</div>
			<div class="topoptions">Config</div>
		</div>
		
		<div id="content">
			Bottom Content
		</div>
		
	</div>

Answer 1

请尝试从您的身体样式中删除高度：100%，并在您的内容元素中添加一个带有 clear：both 的元素，如下所示：

<div id="content">
            Bottom Content
    <br style="clear:both;">
</div>