CSS实现左右栏宽度固定中间栏宽度变化且各栏高度自适应背景色不同的三栏布局

最新推荐文章于 2021-04-24 10:12:42 发布

俱会一处

最新推荐文章于 2021-04-24 10:12:42 发布

阅读量516

点赞数

本文链接：https://blog.csdn.net/jhycjhyc/article/details/58135290

版权

1.效果

三栏布局，三栏的高度各随内容变化，内容多就长一点，内容少就短一点，但背景色始终填满各栏，左栏宽度始终为200px,右栏宽度始终为250px,中间栏宽度最少为350，可随浏览器窗口的增大而增大。如下图所示：

使浏览器窗口变宽，则中间栏变宽，左右栏不变。

2.代码

html部分

<body>
    <div class="background">
        <div class="header">这是头标</div>
        <div class="leftcol">
            <div>这是左侧栏.这是左侧栏.这是左侧栏.这是左侧栏.</div>
        </div>
        <div class="rightcol">
            <div >
                这是右侧栏.这是右侧栏.
                这是右侧栏.这是右侧栏.
                这是右侧栏.这是右侧栏.
                这是右侧栏.这是右侧栏.
                这是右侧栏.这是右侧栏.
                这是右侧栏.这是右侧栏.
            </div>
        </div>
        <div class="centercol">这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.</div>
        <div class="footer">这是脚标。脚标div使用了clear:both;使左侧栏或右侧栏的长度长于中间栏时自动下降避开它们的覆盖。</div>
    </div>
</body>

css部分

        body {
            margin: 0px; /*取消部分浏览的默认值*/
        }
        div
        {
            padding:.5em;
        }

            div.background {
                padding:0;
                min-width: 800px;
                margin: 0 auto; /*居中*/
                width: 80%; /*相对body的宽度*/
                background-image: linear-gradient(90deg,#bdf5d9 200px,#fff 200px,#fff calc(100% - 250px),#f6cb8f calc(100% - 250px));
                /*上句将三栏的背景色设在ground div上，避免出现背景色中断*/
            }

            div.header {
                font-family: 黑体;
                text-shadow: 3px 3px 3px #333;
                background-color: #f00;
                color: #fff;
            }



            div.leftcol {
                padding:0;
                width: 200px; /*定宽*/
                float: left;
            }

            div.rightcol {
                padding:0;
                width: 250px; /*定宽*/
                float: right;
                /*飘浮者的上限是其在文档位置的前的一个块元素的下边沿，下限没有规定*/
            }

            div.centercol {
                margin: 0 250px 0 200px;
                /*仍在流中*/
            }

              div.footer {
                background-color: #70e1f6;
                color: #fff;
                text-shadow: 2px 2px 3px #333;
                 clear: both;
            }

3.要点。利用float属性使左右栏漂浮，利用margin属性让出左右栏空间，利用clear属性调整footer的位置，利用calc（）计算背景色的位置，利用linear-gradient设置假的背景色。详见代码中的注释。

俱会一处

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实现左右栏宽度固定中间栏宽度变化且各栏高度自适应背景色不同的三栏布局

1.效果三栏布局，三栏的高度各随内容变化，内容多就长一点，内容少就短一点，但背景色始终填满各栏，左栏宽度始终为200px,右栏宽度始终为250px,中间栏宽度最少为350，可随浏览器窗口的增大而增大。如下图所示：浏览器窗口变宽，中间栏变宽，左右栏不变。2.代码 * {
复制链接

扫一扫