Question

我正在开展一个小项目，我正在制作一个管理面板。我的标记有一个小问题。我试图将我的页面分为两列：左侧 - 管理面板，右侧包含导航栏和内容本身。问题是我的内容扩展太多并且变得比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;
}

Answer 1

所有你需要的：一个好的开始

<强> 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 不要使用浮动或者你把它弄得一团糟，为ADMIN设置一个宽度，然后让浏览器决定使用WRAPPER。使用margin-left将WRAPPER移至ADMIN的右侧。

关于填充，如果你将paddings设置为ADMIN，你将溢出BODY高度，因此我们需要使用一些内部容器，我们将向其应用所需的填充空间。

div大于body标签

1 个答案: