内容 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>