zoukankan      html  css  js  c++  java
  • 网页html结构右侧栏固定,左侧自适应大小。

    最近写了一个项目,写页面的结构,html树形结构是有header,container,footer部分,其中container部分是右侧栏是固定宽度,左侧是自适应宽度与屏幕高度。

    第一次写的博客文章是container部分是左侧栏固定,右侧是自适应效果。左侧栏固定是很好写,但右侧栏固定却不很好写,以下是基本的结构与样式。

     <div class="container" style="overflow:hidden;">
            <div class="left leftCont">
            </div>
            <div class="right rightSide">
            </div>
    </div

    1.左右栏高度一定, 如果仍想按照左侧固定的模式写右侧固定的效果。可以如下写:

    可以看到container下的两个div进行了对调。

    <style type="text/css">
           
            .rightSide {
                width: 200px;
                height: 600px;
                background: red;
                float: right;
            }
            .leftCont {
                width: 100%;
                margin-right: 200px;
                background-color: blue;
                height: 600px;
            }
        </style>
    </head>
    <body>
        <div class="container" style="overflow:hidden;">
            <div class="rightSide">
            </div>
            <div class="leftCont">
            </div>
        </div>
    </body>

    2.如果不想将两个子div进行调换位置,则可以写如下代码,

      <style type="text/css">
            .rightSide {
                width: 200px;
                height: 600px;
                background: red;
                float: right;
            }
    
            .leftCont {
                float: left;
                width: 100%;
                margin-right: 200px;
                background-color: blue;
                margin-bottom: -2000px;
                padding-bottom: 2000px;
            }
        </style>
    </head>
    <body>
        <div class="container" style="overflow:hidden;">
            <div class="left leftCont">
            </div>
            <div class="right rightSide">
            </div>
        </div>
    </body>

    这样界面实现效果,并且左侧的高度大小跟右侧div的高度一样。 其中关键的两句话是:margin-buttom:-2000px; padding-buttom:2000px; 并且3000px不是固定的值,只要是比实际需求的高度大就ok。

  • 相关阅读:
    Python
    Python
    Jmeter 学习路线
    Git 学习路线
    数据库学习路线
    Linux 学习路线
    Gitlab(2)- centos7.x 下安装社区版 Gitlab 以及它的配置管理
    云原生学习路线(仅供参考)
    Python
    Python
  • 原文地址:https://www.cnblogs.com/pengpenglin/p/4251894.html
Copyright © 2011-2022 走看看