html-圣杯布局

1.两边固定当中自适应
2.当中列要完整显示
3.当中列要优先加载
浮动: 搭建完整的布局框架
margin 为赋值:调整旁边两列的位置(使三列布局到一行上)
使用相对定位:调整旁边两列的位置（使两列位置调整到两头）

!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                margin: ;

                padding: ;

            }

            body{

                min-width: 600px;

            }

            #content{

                padding: 0 200px;

            }

            #header,#footer{

                height: 20px;

                text-align: center;

                border: 1px solid  deeppink;

                background: gray;

            }

            #content .middle{

                float: left;

                width: %;

                background: pink;

                /*padding: 0 200px;*/

            }

            #content .left{

                position: relative;

                left: -200px;

                margin-left: -%;

                float: left;

                width: 200px;

                background: yellow;

            }

            #content .right{

                position: relative;

                right: -200px;

                margin-left: -200px;

                float: left;

                width: 200px;

                background: yellow;

            }

            .clearfix{

                *zoom: ;

            }

            .clearfix:after{

                content: "";

                display: block;

                clear: both;

            }

        </style>

    </head>

    <body>

        <div id="header">header</div>

        <div id="content" class="clearfix">

            <div class="middle">

                <h4>middle</h4>

                <!--<h4>middle</h4>

                <h4>middle</h4>

                <h4>middle</h4>

                <h4>middle</h4>

                <h4>middle</h4>

                <h4>middle</h4>

                <h4>middle</h4>

                <h4>middle</h4>

                <h4>middle</h4>

                <h4>middle</h4>

                <h4>middle</h4>

                <h4>middle</h4>

                <h4>middle</h4>

                <h4>middle</h4>

                <h4>middle</h4>

                <h4>middle</h4>

                <h4>middle</h4>

                <h4>middle</h4>

                <h4>middle</h4>

                <h4>middle</h4>

                <h4>middle</h4>-->

            </div>

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

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

        </div>

        <div id="footer">footer</div>

    </body>

</html>

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

中间加入无限增高

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>圣杯布局</title>

        <style type="text/css">

            *{

                margin:;

                padding:;

            }

          body{

              min-width:600px;

          }

          #content{

              overflow: hidden;

              padding:  200px;

          }

          #header, #footer{

              height: 20px;

              text-align: center;

              border: 1px solid deeppink;

              background: gray;

          }

          #content .middle, #content .left, #content .right{

              padding-bottom: 10000px;

              margin-bottom:-10000px;

          }

            #content .middle{

                float: left;

                width: %;

                background: pink;

                /*padding: 0 200px;*/

            }

            #content .left{

                background: yellow;

               position: relative;

                float: left;

                width: 200px;

                /*100%提升一层*/

                margin-left: -%;

                /*根据父级左右padding 200px; 让他据左边 */

                left:-200px;

            }

            #content .right

            {

                background:yellow;

                position: relative;

                float: left;

                width:200px;

                /*-200px提升一层*/

                margin-left: -200px;

                right: -200px;

            }

            .clearfix{

                zoom: ;

            }

           .clearfix:after{

               content:"";

               display: block;

               clear:both;

           }

        </style>

    </head>

    <body>

        <div id="header">header</div>

        <div id="content" class="clearfix">

            <div class="middle">

                <h4>middle</h4>

                <h4>middle</h4>

                <h4>middle</h4>

                <h4>middle</h4>

                <h4>middle</h4>

                <h4>middle</h4>

                <h4>middle</h4>

                <h4>middle</h4>

            </div>

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

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

        </div>

        <div id="footer">footer</div>

    </body>

</html>

html-圣杯布局的更多相关文章

CSS布局 -- 圣杯布局 & 双飞翼布局
按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...
CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
CSS之圣杯布局与双飞翼布局
圣杯布局三行等高 HTML: <!DOCTYPE html><html><head> <meta charset="utf-8"& ...
css圣杯布局、等高布局
所谓圣杯布局,就是自适应浏览器的分辨率,也称双飞翼布局. 例子: <style> body{margin:0;} .center{height:600px;background:#f60; ...
CSS经典布局-圣杯布局、双飞翼布局
圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...
CSS布局方案之圣杯布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
前端css：“圣杯布局”
昨天面试前端,一面危险通过,面试官建议我看看“圣杯布局”,听起来很玄妙的名字,花了一晚上弄明白怎么回事,惊讶于前端工作的细节和技巧! 我先看几个基础,在后面要用到的: 1.CSS right/left ...
中间自适应，左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局
一.引子最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局 ...
CSS 圣杯布局升级版---多个固定宽度一个自适应宽度
1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="mai ...
CSS布局-圣杯布局
圣杯布局圣杯布局很完美(兼容所有浏览器,包括IE6),但是使用了相对定位,布局有局限性,宽度控制要改的地方也多. 第一种方法公用部分: .lgyz, .lzrg, .lrzcg, .lcgrz, . ...

随机推荐

关于Mysql分区和分表
[分区概念]分区就是把一张表的数据按照一定的规则分成多个区块,这些区块可以在同一个磁盘上,也可以在不同的磁盘上.分区后表还是一张表.分区根据一定的规则把数据文件和索引文件进行了分割,还多出了一个.pa ...
A1095 Cars on Campus (30 分)
Zhejiang University has 8 campuses and a lot of gates. From each gate we can collect the in/out time ...
剑指offer——18打印从1到最大的n位数
题目: 输入数字n,按顺序打印出从1到最大的n位十进制数.比如输入3,则打印出1.2.3一直到最大的3位数999. 题解: 注意大数溢出问题,故使用字符串更靠谱 class Solution { pu ...
java 8 lambda函数
1 为什么要引进lambda函数可以简化编码,将事情更多的交给编译器,让编译器帮我们推断我们写的代码的完整形式. 2 lambda函数的语法 2.1 -> (arg1, arg2) -> ...
solr 如何实现精确查询
第一条和第三条不应该出现的. 解决办法
RocketMQ核心技术精讲与高并发抗压实战
1:特点比较吃内存内存至少1g 默认8g 1:支持集群模型,强调集群无单点,负载均衡以及水平扩展能力2:亿级别的消息堆积能力3:采用零拷贝原理Consumer 消费消息过程,使用了零拷贝顺序写盘 ...
ES6 学习 -- Class继承
(1)如何继承Class可以通过extends关键字实现继承,如下:class Father { } class Child extends Father { }// 这里子类Child继承父类Fat ...
iphone11系统输入框的光标位置不正常
本人的系统是11.3的是正常的,却发现测试机的11.1和11.2的光标位置在输入框的下边.百度一下,很多人有同样的问题,在此记录一下解决办法一: //弹框弹出后执行如下代码 $('body').cs ...
java Twain 直接打印/界面打印
这两天,在搞归档系统.需要用到Twain协议来驱动扫描仪. 找了两天,java的twain操作资料真的不多.而且我还是要找直接打印的功能. 后来只能静下心来看类库和源码.最后搞定他. 打印方式分为3种 ...
Cats Transport
Cats Transport 现在有n座山,第i座山的坐标为$d_i$,初始p个饲养员在山1,有m只猫,每只猫有一个属性$h_i,t_i$表示猫i 在$h_i$以及它在$t_i$时间后 ...

html-圣杯布局

html-圣杯布局的更多相关文章

随机推荐

热门专题