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


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

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

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

    代码如下:

    <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>
  • 相关阅读:
    聊聊HTTP gzip压缩与常见的Android网络框架
    Material适配2
    Material适配1
    将Eclipse代码导入到AndroidStudio的两种方式
    Android批量打包提速
    放弃WebView,使用Crosswalk做富文本编辑器
    Android MP3录音实现
    OkHttp2.0有Bug,暂时不推荐在产品中使用
    Java XML SAX 解析注意
    Evernote Markdown Sublime使用介绍
  • 原文地址:https://www.cnblogs.com/mianbaodaxia/p/6256871.html
Copyright © 2020-2023  润新知