zoukankan      html  css  js  c++  java
  • css实现左栏固定右栏自适应,高度自适应的布局

      收集css中的基础知识,所以这并不是什么新鲜的技术,只是作为备忘~本文的内容如题所示,是一个简单的布局,用于左右两栏布局的页面,左侧是固定宽度,右侧占据剩余的宽度。在垂直方向,始终以高度最大的一栏为基准,例如,随着右侧面板中动态添加内容高度增加,左侧也跟着增加,这样不会产生的难看的像这样的情况:

      实现该布局的代码如下:

    <style type="text/css">
        #content{
            border:5px solid blue;
            overflow: hidden;
        }
        #leftpanel{
            background-color: red;
            width: 300px;
            height: auto;
            float: left;
            padding-bottom: 3000px;
            margin-bottom: -3000px;
        }
        #right{padding-left: 300px;}
        #rightpanel{
            background-color: green;
            height: 100px;
            padding-bottom: 3000px;
            margin-bottom: -3000px;
        }
    </style>
    <div id="content">
        <div id="leftpanel">
            <ol>
                <li>sdfdf</li>
                <li>sdfdf</li>
                <li>sdfdf</li>
                <li>sdfdf</li>
            </ol>
        </div>
        <div id="right">
            <div id="rightpanel"></div>
        </div>
    </div>

    效果如下:

    1. sdfdf
    2. sdfdf
    3. sdfdf
    4. sdfdf
     
  • 相关阅读:
    提高代码质量:如何编写函数
    如何写自我评价
    写简历注意事项
    Android开发注意细节
    Android:onNewIntent()触发机制及注意事项
    Atom与markdown
    Java程序性能优化总结
    Java中的继承与组合
    Fragment生命周期总结
    C# 生成随机姓名
  • 原文地址:https://www.cnblogs.com/lvdabao/p/3423986.html
Copyright © 2011-2022 走看看