我正在开发一个小元素，并且正在制作一个管理面板。我的标记有一个小问题。我试图将我的页面分为两列:左侧 - 管理面板，右侧包含导航栏和内容本身。问题是我的内容扩展太多并且变得比 html 标签更大，这导致我的 2 列高度不均匀。我该如何修复它？
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
{{ stylesheet_link ('css/admin.css')}}
</head>
<body>
<div class="container">
<div class="admin-panel">
<h4>Navigation</h4>
<ul>
<li>
<a href="" class="active-item">Dashboard</a>
</li>
<li>
<a href="">Email</a>
</li>
<li>
<a href="#">Pages</a>
</li>
<li>
<a href="#">Tables</a>
</li>
</ul>
</div>
<div class="wrapper">
<div class="admin-navbar">
<ul>
<?= Tag::form(array('admin/search','method'=>
'GET')) ;?>
<?= Tag::textField(array('search', 'maxlength'=>
'30'));?>
<?= Tag::submitButton('Search');?>
<?= Tag::endForm(); ?>
<li>
<a href="#" class="navbar-item">Profile</a>
<ul>
<li>
<a href="#">My Profile</a>
</li>
<li>
<a href="#">Account Settings</a>
</li>
<li>
<a href="#">Logout</a>
</li>
</ul>
</li>
<li>
<a href="/" class="navbar-item">Home</a>
</li>
</ul>
</div>
<div class="content">
<h2 id="dashboard" class="header">Dashboard</h2>
{{ content()}}
<h2 id="email">Email</h2>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
和CSS:
编辑:
html, body {
margin:0;
padding:0;
height:100%;
}
body {
background: #eee;
}
.container {
position: relative;
}
.admin-panel, .wrapper {
float:left;
height:100%;
}
.wrapper {
margin:0;
width:1100px;
height:auto;
float:left;
}
.admin-navbar {
background: #222;
height:50px;
box-sizing: border-box;
-mozilla-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-bottom:2px solid #000;
}
.admin-navbar ul {
height:50px;
line-height: 50px;
margin:0 auto;
padding:0;
}
ul li {
display: inline-block;
margin:0;
padding:0;
}
.admin-navbar ul li {
float:right;
}
.admin-navbar>ul>li>a {
display: block;
text-align: center;
color:#fff;
padding:0 5px;
width:140px;
}
.admin-navbar ul li a:hover {
background:#282828;
}
.admin-navbar ul li ul {
display: none;
position: absolute;
top:50px;
padding:5px;
background: #333;
width:140px;
right:0;
height: auto;
}
.admin-navbar ul li ul li {
margin:0;
padding:0;
display: block;
float:left;
width:100%;
}
.admin-navbar ul li ul li a{
display: block;
width:100%;
text-align: center;
line-height: 30px;
border-radius: 2px;
}
.admin-navbar ul li ul li a:hover{
background: #228856;
}
.admin-navbar ul li:hover ul {
display: block;
}
.admin-navbar form {
display: inline-block;
}
.admin-navbar form input {
margin:0;
padding:0;
height:30px;
}
.admin-navbar form input[type="text"] {
border:none;
width:200px;
}
.admin-navbar form input[type="submit"] {
background:#fff;
border:none;
width:70px;
color:#000;
}
.admin-navbar form input[type="submit"]:hover {
background: #285;
color:#fff;
cursor: pointer;
}
.admin-panel {
background: #222;
width:219px;
padding:20px 15px;
margin:0;
height:100%;
float:left;
}
.admin-panel h4 {
padding:0;
margin:0;
color:#fff;
}
.admin-panel ul {
margin:0;
margin-top:30px;
padding:0;
}
.admin-panel ul li {
display: block;
list-style-type: none;
margin-bottom:5px;
border-radius:5px;
}
.admin-panel ul li a {
display: block;
padding-top:10px;
line-height: 15px;
padding-left:20px;
padding-bottom:10px;
background: #333;
border-radius: 5px;
height:15px;
}
.admin-panel ul li a:hover {
background: #fff;
color:#111;
}
ul li a.active-item {
background: #285;
border-radius: 5px;
}
.content {
padding:10px;
}
.clear {
clear:both;
}
.header {
background: #fff;
}
a {
color:#fff;
text-decoration: none;
}
h1,h2,h3,h4,h5,h6 {
padding:0;
margin:0;
text-align: center;
}
h2 {
color:#111;
}
table {
padding:0;
border-spacing: 0;
background: #fff;
width:100%;
}
table tr {
margin:0;
padding:0;
background: #333;
}
table tr td {
color:#fff;
}
table tr a {
color:#fff;
display: inline-block;
}
table tr a:hover {
text-decoration: underline;
}
table tr td, table tr th {
border:1px solid #1d2939;
text-align: center;
}
table tr:hover {
background: #285;
}
table tr th {
background:#418bca;
}
最佳答案
您所需要的一切:良好的开端
<强> LIVE DEMO
*{margin:0; padding:0;} /* Ugly reset */
html, body {
height:100%;
background: #555; /* to fulfill page background */
}
/*admin*/
.admin-panel {
position:absolute; /* to make it height 100% */
height:100%;
width:219px;
background: #222;
}
.admin-content{ /* added in order to add inner paddings */
padding:20px 15px;
}
/*page*/
.wrapper {
margin-left:219px; /* admin width */
}
.admin-navbar, .content{
padding:20px 15px;
}
因此您只需要 2 个主容器，左侧的 ADMIN 面板和右侧的 WRAPPER。
不要使用 float ，否则你会把它弄乱，为 ADMIN 设置宽度，然后让浏览器决定 WRAPPER。使用 margin-left 将 WRAPPER 移至 ADMIN 的右侧。
关于填充，如果将填充设置为 ADMIN，则会溢出 BODY 高度，因此我们需要对一些内部容器使用所需的填充空间。
关于css - div 比 body 标签大，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23170992/