首页 文章

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

提问于
浏览
2

我有两个面板,一个是侧边栏,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>

1 回答

  • 0

    请尝试 removing 来自您的身体样式 height:100% 并向您的内容元素添加一个带有clear的元素:两者都应用于它:

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

相关问题