Question

我正在为自己设计一个仪表板界面。我在内部div中遇到一些问题，我的leftpane div在父级内部被设置为100％高度，但是父级div溢出了50px的数量，这是topbar的高度。请告诉我为什么它会溢出，100％应该意味着有什么空间，不是吗？

这是我的css和html

html, body {
	height:100%;
	margin: 0px;
}

.wrapper {
	width: 100%;
	height: 700px;
	margin: auto;
	border: 1px solid black;
	display: table;
}

.topbar {
	height: 50px;
	background: #353535;
	background-color: #353535;
	clear:both;
	color: white;
	width: 100%;
	position:relative;
}

.leftpane {
	width: 20%;
	height: 100%;
	background-color: #eee;
	float: left;
	border-right: 2px solid #353535;
}

.content {
	width: 79%;
	height: 100%;
	float:right;
	border: 2px solid red;
}

.content-header {
	height: 50px;
	background-color: #353535;
	width: 100%;
}

.content-area {
	height:100%;
	width: 100%;
	border: 2px solid green;
}

<html>
<head>
<title>GUYACOM - Suivi de la connectivit&eacute;</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style2.css" />
<!-- <link rel="stylesheet" href="css/bootstrap.css" /> -->
<!--<link rel="stylesheet" href="css/colorbox.css" /> -->
<!-- <script type="text/javascript" src="js/tinybox.js"></script> -->
</head>
<body>
<div class="wrapper">
	<div class="topbar"><h1>
	</h1></div>
	<div class="content-area">
		<div class="leftpane">
		</div>
		<div class="content">
			<div class="content-header">
			</div>
		</div>
	</div>
</div>
</body>
</html>

Answer 1

试试这可能对你有帮助......

<html>
<head>
<title>GUYACOM - Suivi de la connectivit&eacute;</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style2.css" />
<style>
html, body {
    height:100%;
    margin: 0px;
}

.wrapper {
    width: 100%;
    height: 100%;
    margin: auto;
    border: 1px solid black;
    display: table;
}

.topbar {
    height: 50px;
    background: #353535;
    background-color: #353535;
    clear:both;
    color: white;
    width: 100%;
    position:absolute;
}

.leftpane {
    width: 20%;
    height: 100%;
    background-color: #eee;
    float: left;
    border-right: 2px solid #353535;
}

.content {
    width: 79.5%;
    height: 100%;
    float: left;
    border: 2px solid red;
}

.content-header {
    height: 50px;
    background-color: #353535;
    width: 100%;
}

.content-area {
    height:100%;
    width: 100%;
    border: 2px solid green;
}
</style>
</head>
<body>
<div class="wrapper">
    <div class="topbar"><h1>
    </h1></div>
    <div class="content-area">
        <div class="leftpane">
        </div>
        <div class="content">
            <div class="content-header">
            </div>
        </div>
    </div>
</div>
</body>
</html>

Div内部的Div 100％高度不起作用

1 个答案: