美文网首页
纯CSS实现侧边栏/分栏高度自动相等

纯CSS实现侧边栏/分栏高度自动相等

作者: 飞天豆团 | 来源:发表于2017-09-02 19:43 被阅读0次

实现分栏高度自动相等的方法。

自适应元素的CSS代码(数值不固定):margin-bottom:-3000px; padding-bottom:3000px;

父级必备属性:overflow:hidden

实例:

 CSS:

        #content{overflow:hidden;}

        .left{width:200px; margin-bottom:-3000px; padding-bottom:3000px; background:#cad5eb; float:left;}

         .right{width:400px; margin-bottom:-3000px; padding-bottom:3000px; background:#f0f3f9; float:right;}

         .center{margin:0 410px 0 210px; background:#ffe6b8; height:600px;}

   HTML布局:

          <div id="content>

                <div class="left">左侧</div>

                <div class="right">右侧</div>

                <div class="center">中间</div>

          </div>

说明:

核心CSS代码部分的3000像素是个可变值,如果您的分栏高度不可能高度超过2000像素,您就可以设为2000像素,如果会超过3000像素,那么您要修改值为4000像素或是更高。

父标签的overflow:hidden属性是必须的,否则会显示溢出的内容。

相关文章

网友评论

      本文标题:纯CSS实现侧边栏/分栏高度自动相等

      本文链接:https://www.haomeiwen.com/subject/immrjxtx.html