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

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设置假的背景色。详见代码中的注释。

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

解决左边宽度固定，右边宽度随浏览器自适应的3种方案
解决左边宽度固定,右边宽度随浏览器自适应的3种方案前言一.使用 flex 布局三.使用 flex + min-width 二.使用 float 浮动四.总结前言在前端开发中,不管是自己写项 ...
前端经典面试题之CSS实现三栏布局，左右宽度固定，中间宽度自适应
前端常问的面试题,题目:假设高度一定,请写出三栏布局,左右宽度300px,中间自适应. 看到这里我希望你能停下来思考几分钟, 1分钟~2分钟~3分钟~4分钟~5分钟! 好了,那么你想出了几种答案呢? ...
前端css实现左侧盒子宽度固定，右侧宽度自适应布局
效果图方法1:通过calc方法做宽度自适应设置width: calc(100% - 100px); (1)这里减100px是示例中有left类名的div宽度,具体减多少px根据情况来 (2)减号两 ...
左侧宽度固定，右侧宽度自适应-----两种布局样式
下面是两种布局方式 html <div class="t1"><div class="one">1</div><div ...
css的经典三栏布局如何实现,css 实现三栏布局的四种方式
三栏布局就是左中右,左右两边固定,中间自适应. 1. 绝对定位左边中间右边 body { padding: ; margin: ; } /* 绝对定位 */ .left, .right { po ...
CSS三栏布局的7种方式代码详解 | 圣杯布局 | 双飞翼布局 | 弹性盒子
CSS三栏布局代码详解写在前面:博主最近在转头复习最前面学的CSS,整理一下CSS三栏布局的笔记,正好也捋顺自己的逻辑思路.解析我尽量按照思路详细的写了,代码均可正确运行,留给需要的小伙伴进行参考, ...
CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
文章转自:http://www.cnblogs.com/honoka/p/5161836.html 今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽 ...
CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼...
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
三栏布局的七种实现方式
目录 1.float 2.position 3.⭐ flex 布局 4.table 布局(很少用) 5.grid 布局(存在兼容性问题) 6.⭐ 圣杯布局 7.⭐ 双飞翼布局三栏布局一般指的是页面一 ...

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

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

最新文章

热门文章