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


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

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

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

    代码如下:

    <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>
  • 相关阅读:
    android studio 修改应用程序图标
    [AppDelegate window]: unrecognized selector sent to instance 0x600002b178e0
    Error compiling file: /private/var/folders/tm/rj18p_ls10lb_fsqfc7h4trm0000gn/T/jetty-0.0.0.0-8081-WebRoot-_-any-/jsp/org/apache/jsp/login_jsp.java
    mac下eclipse突然打不开了,直接停在启动页上不动
    iOS下收不到通知,或者只收到一个通知
    名词:箭头函数
    名词:硬编码
    keil5开发工具
    Android系统源码学习步骤 ,linux学习方向
    小白学习Spark系列一:Spark简介
  • 原文地址:https://www.cnblogs.com/mianbaodaxia/p/6256871.html
Copyright © 2020-2023  润新知