Question

我有两个面板，一个是侧边栏，100％高度和100px宽度（紫色），我也有一些按钮（橙色），然后我有一个顶部div为100的右面板％width和100px height（绿色），此面板包含3个向右浮动的按钮（灰色）。

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

快速举例：

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

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

请尝试从您的正文样式中删除 $j，并在内容元素中添加一个带有clear的元素：两者都应用于此：

height:100%

内容div不是100％的高度和宽度

1 个答案: