html - 内容div不是100%高宽

Question

我有两个面板，一个是侧边栏，高度为 100%，宽度为 100px(紫色)，我在这个面板中也有一些按钮(橙色)，然后我有右侧面板，其顶部 div 为 100 % 宽度和 100px 高度(绿色)，此面板包含 3 个向右浮动的按钮(灰色)。

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

简单示例:

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

这是我目前的工作示例:Demo

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

请尝试从您的正文样式中删除 height:100% 并向您的内容元素添加一个带有 clear:both 的元素，如下所示:

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