网页布局:左边为导航，右边正文,左边和右边的高度总是相等,或者导航最低高度为屏幕高度

现在很多网页的布局是左边是导航，右边是正文，这样看起来简单、大方，我们公司的网站就是这样设计的，有两种错误的布局如下：

图一和图二两种都是错误的情况，图一没有给左边导航设置高度，图二给左边设置了高度为屏幕的高度，当出现滚动条的时候，显示的也很丑。

正确的情况应该是，左边和右边的高度总是相等

代码如下：

<div class="container">
    <div class="left">
        <div>1导航</div>
        <div>2导航</div>
        <div>3导航</div>
        <div>4导航</div>
    </div>
    <div class="right">
        <div>sss</div>
        <div>test</div>
        <div>test</div>
        <div>test</div>
    </div>
</div>
<style>
    body {
        margin: 0;
        padding: 0;
        text-align: center;
    }
    .container {
        overflow: hidden;
    }
    .left {
        width: 20%;
        float: left;
        background-color: #e2e2e2;
        min-height: 100%;
        margin-bottom: -99999px;
        padding: 0 0 99999px;
    }
    .left div {
        border-bottom: 1px solid #ccc;
        color: #6f6f6f;
        display: block;
        padding: 20px 2px;
        text-decoration: none;
    }
    .right {
        width: 80%;
        float: left;

    }
    .right div {
        height: 100px;
        background-color: #ddd;
    }
</style>

或者需要左边导航高度最少为屏幕的高度，只要给导航设置最小高度为100%，前提是它父亲的高度为100%；

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div class="container">
    <div class="left">
        <div>1导航</div>
        <div>2导航</div>
        <div>3导航</div>
        <div>4导航</div>
    </div>
    <div class="right">
        <div>sss</div>
        <div>test</div>
        <div>test</div>
        <div>test</div>
    </div>
    <div></div>
</div>
</body>
<style>
    html, body {
        margin: 0;
        padding: 0;
        text-align: center;
        height: 100%;
    }
    .container {
        overflow: hidden;
        height: 100%;
    }
    .left {
        width: 20%;
        float: left;
        background-color: #e2e2e2;
        min-height: 100%;
        margin-bottom: -99999px;
        padding: 0 0 99999px;
    }
    .left div {
        border-bottom: 1px solid #ccc;
        color: #6f6f6f;
        display: block;
        padding: 20px 2px;
        text-decoration: none;
    }
    .right {
        width: 80%;
        float: left;

    }
    .right div {
        height: 100px;
        background-color: #ddd;
    }
</style>
</html>

 

posted @ 2017-01-06 16:38  面包大虾  阅读(2932)  评论(0)  编辑  收藏  举报