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

最新推荐文章于 2024-04-18 17:51:22 发布

weixin_30381317

最新推荐文章于 2024-04-18 17:51:22 发布

阅读量191

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mianbaodaxia/p/6256871.html

本文介绍了如何实现常见的网页布局——左侧导航栏与右侧主要内容区域，并确保两者高度一致。文章提供了两种实现方案，一种适用于固定高度，另一种则使导航栏高度至少达到屏幕高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

代码如下：

<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>