html div三列布局占满全屏（左右两列定宽或者百分比、中间自动适应，div在父div中居底）

最新推荐文章于 2024-01-26 10:57:50 发布
最新推荐文章于 2024-01-26 10:57:50 发布
阅读量1.8w 收藏 10
点赞数
分类专栏： html 文章标签： html div布局 三列布局 占满全屏 div居底

参考文章：http://hi.baidu.com/alimyself/item/3aa6763d787cc7697c034b9d

参考文章：http://www.cnblogs.com/webmoon/archive/2013/05/05/3060918.html

参考文章：http://blog.sina.com.cn/s/blog_92d6237201016jhs.html（div居底）

参考文章：http://biancheng.dnbcw.info/css/429958.html（占满全屏）

     div布局：

<div>
            <div id="header">
                上
                <div id="h_menu">
                    上_底
                </div>
            </div>
            <div id="middle">
                <div class="left">
                    中左
                </div>
                <div class="right">
                    中右
                </div>
                <div class="center">
                    中间
                </div>
            </div>
            <div id="footer">
                下
            </div>
        </div>

样式：

<style type="text/css">
        body, html {
            margin: 0px;
        }
        #header {
            background: blue;
            height: 100px;
            width: 100%;
            position:relative; /*父div的位置设置成相对的*/
        }
            #h_menu {
                width:100%;
                height:50px;
                background:yellow;
                /*而子div的位置设置成绝对的，并且下边缘设为0*/
                position:absolute;
                bottom:0;               
            }
        .left {
            width: 15%;    /*这里是百分比或者像素值，对应下面的center就是百分比或者像素值*/
            height: 200px;
            background: red;
            float: left;
        }
        .right {
            width: 15%;  /*这里是百分比或者像素值，对应下面的center就是百分比或者像素值*/
            height: 200px;
            background: pink;
            float: right;
        }
        .center {
            height: 200px;
            background: green;
            /*两种方式均可（一）margin(二)margin-left、margin-right*/
            /*（一）、用这种方式上面的left和right中的width是百分比或者像素值都可以*/
            margin: auto;    
            /*(二)、这里是百分比或者像素值，对应上面的left、right中的width就是百分比或者像素值*/
            /*margin-left:15%;    
            margin-right:15%;*/
        }
        #footer {
            background: blue;
            height: 100px;
            width: 100%;
        }
    </style>

效果图如下：

 另一种实现方式（高度也占满全屏）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        body, html {
            margin: 0px;
        }
        #header {
            background: blue;
            height: 100px;
            width: 100%;
            position: relative; /*父div的位置设置成相对的*/
            top: 0;
        }
            #header #h_menu {
                position:absolute;
                bottom:0;
                background:yellow;
                width:100%;
                height:50px;
            }
        #middle {
            position:absolute;
            width:100%;
            height:auto;
            top: 100px;
            bottom:50px;                  
        }
        .left {
            width: 15%;    /*这里是百分比或者像素值，对应下面的center就是百分比或者像素值*/
            background: red;
            float: left;
            height:100%;
        }
        .right {
            width: 15%;  /*这里是百分比或者像素值，对应下面的center就是百分比或者像素值*/
            height: 100%;
            background: pink;
            float: right;
        }
        .center {
            height: 100%;
            background: green;
            /*两种方式均可（一）margin(二)margin-left、margin-right*/
            /*（一）、用这种方式上面的left和right中的width是百分比或者像素值都可以*/
            margin: auto;    
            /*(二)、这里是百分比或者像素值，对应上面的left、right中的width就是百分比或者像素值*/
            /*margin-left:15%;    
            margin-right:15%;*/
        }
        #footer {
            background: blue;
            height: 50px;
            width: 100%;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="header">
                上  
                <div id="h_menu">
                    上_底
                </div>             
            </div>
            <div id="middle">
                <div class="left">
                    中左
                </div>
                <div class="right">
                    中右
                </div>
                <div class="center">
                    中间
                </div>
            </div>
            <div id="footer">
                下
            </div>
        </div>
    </form>
</body>
</html>

截图如下：


 

 

 

duyelang
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
两侧列固定中间列变宽Div布局示例
09-25
有关Div布局的示例在之前的文章中有为大家介绍过，或多或少在实践中会有些帮助，本例为大家讲述的是两侧列固定中间列变宽的div布局，感兴趣的朋友可以参考下
html自适应电脑屏幕大小,html页面怎样能够自适应电脑屏幕宽度?
weixin_39751769的博客
06-08 3992
满意答案dazhaowudi2015.12.24采纳率：44%等级：4已帮助：7854人网友们上网通常会采用800×600、1024×768两种分辨率，由于网页不是用来给自己看的，所以我们必须让自己的网页能够兼顾这两种情况，让不同分辨率设置的网友都能够看到一个排版美观正确的网页。一、 自然拉伸如果你的网站结构没有用到大量的图形来衔接，主要由表格来定结构，那么你就可以使用该方法。非常适用于主...
html如何将页面分成三列,如何进行CSS网页布局（一列，二列，三列，混合）
weixin_42813171的博客
06-03 2348
1.两列自适应宽度：body{margin: 0;padding: 0;}/清除默认样式/.left{width: 20%; height: 500px; background: red; float: left;}.right{width: 80%; height: 500px; background: blue; float: right;}两列自适应布局：会随着浏览器窗口宽度改变。width...
vue中让tempalte里面的div铺满全屏的办法
最新发布
weixin_58689699的博客
01-26 419
1.将div设置定位，这样就可以脱离template，以body为父级。2.用vw和vh，设置百分之百。
html5+css3网页制作:三栏布局宽度自适应,使用CSS实现三栏自适应布局(两边宽度固定，中间自适应)...
weixin_36378347的博客
06-15 833
所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。 我这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。1. 基于传统的position和margin等属性进行布局这里也分为三种方法，分别为绝对定位法，圣杯布局，自身浮动法。1).绝对定位法绝对定位法原理是将左右两边使用absolute定...
html三列布局中间固定,常见的三列布局（左右固定宽度，中间自适应）
weixin_39915605的博客
07-01 559
实现css中的三列布局，左右固定宽度，中间自适应。三列布局方式的关键是怎么样才能使得在伸缩浏览器窗口的时候让中间的子元素宽度改变。比较常见的实现方案是：定位，浮动，css3中新特性flex布局，以及流行的圣杯布局，双飞翼布局。1、自身浮动法思路：对左右分别使用float:left和float:right，float使左右两个元素脱离文档流，中间盒子是正常文档流。在html结构中，中间的盒子一定要放...
html怎么设置页面自适应屏幕大小,网页设计设置页面自适应屏幕宽度
weixin_42505792的博客
06-04 3万+
方法：1、在网页头部加上这样一条meta标签：解释：width=device-width ：宽度等于设备屏幕的宽度initial-scale=1。0：表示：初始的缩放比例minimum-scale=0。5：表示：最小的缩放比例maximum-scale=2。0：表示：最大的缩放比例user-scalable=yes：表示：用户是否可以调整缩放比例另外：如果想控制字体的大小的话，应该使用相对大小，可...
div三行或三列铺满全屏
ch206265的博客
04-07 3420
这里写自定义目录标题一、实现要求二、实现过程1、字体水平居中和垂直居中 一、实现要求 铺满屏，字体居中 交互，点击一个盒子能够改变另外一个盒子的颜色 最开始的实现效果使这样的： 但是有些问题： 字体只有水平居中，没有垂直居中； 第三行的盒子最右边没有铺满，并且，我理解的铺满全屏是指完全铺满，既没有剩余空白，也不会让内容一屏显示不完，也就是说要让屏幕右侧的滚动条和下面的滚动条消失，内容显示完...
div三栏布局左中右通过float浮动来设置
09-25
构造div分为3烂，左中右，主要通过float浮动来设置，side靠左浮动，side1靠右浮动，具体示例代码如下，需要的朋友可以参考下
学习DIV+CSS网页布局之两列布局
01-19
DIV+CSS 网页布局第二篇：两列布局 1、宽度自适应两列布局 　两列布局可以使用浮动来完成，左列设置左浮动，右列设置右浮动，这样就省的再设置外边距了。 　当元素使用了浮动之后，会对周围的元素造成影响，那么就...
脚本控制三行三列自适应高度DIV布局
10-31
脚本控制三行三列自适应高度DIV布局
学习DIV+CSS网页布局之三列布局
12-13
　三列布局的原理和两列布局的原理是一样的，只不过多了一列，只需给宽度自适应两列布局中间再加一列，然后重新计算三列的宽度，就实现了宽度自适应的三列布局。 　同样的道理，更多列的布局，其实和两列、三列的...
js 实现三个div上下排列各占屏幕的三分之一推动其中一个div的上下边框改变高度，相邻的div高度跟着改变
qq_45404003的博客
09-07 626
js 实现三个div上下排列各占屏幕的三分之一推动其中一个div的上下边框改变高度，相邻的div高度跟着改变
页面的百分比布局
qq_35315439的博客
08-15 4577
写一个产业图谱的页面已经很久，却从没有进行复盘过。自己细细一想，自己写的页面，对它总体的把控却没有。感觉一个页面是在修修补补中完成的。所以特定总结一个百分比的页面布局。 知识点： 基本的Html页面构成： //<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。 <!doctype html> <html> <head> <meta charset="utf-8">
html 最小边框宽度,css如何让div边框不占宽度？
weixin_29363791的博客
05-31 1460
HTML中，给一个DIV添加一个边框，那么这个DIV的宽度和高度就增加成为这个DIV的宽度加上这个边框的宽度，那么我们如何让边框不占宽度呢？我们做网站时可以添加边框box-sizing属性：让边框不占宽度，在DIV宽度内画边框。box-sizing属性允许以特定的方式定义匹配某个区域的特定元素。例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"...
CSS两列全屏可伸缩布局
白杨
06-26 1480
CSS两列全屏可伸缩布局 ----------------------------------------------------------------------------------------------------------------------------------------------- div style="float:left;width:100%; backgro
HTML学习日记<1>-排版布局
zag666的博客
03-30 1566
其实，在网页制作中，页面上的元素就是块与块之间的关系，他们存在着三种状态：块挨着块，块嵌套着块，块叠压着块。通过css将这些块摆放正确，网页中的布局也自然就会完美了！ 一、网页的一列布局： <!DOCTYPE html> <html> <head> <title>网页标题</title><!-- 显示网页标题，若title标签为空...
解决html网页缩放问题
热门推荐
Albert
10-16 6万+
当我们学习过div布局的时候，你肯定会有这样的疑问：为什么别人的网页无论怎么缩放都不会影响它的想对位置，而我的页面在使用浏览器对页面进行放大缩小的时候，有时候会出现错位，或者边框无法吻合。将页面缩小到最小时，页面内容将会堆砌在一起呢？         首先出现这个问题的主要原因还是因为你对浮动、定位的理解不够透彻！下面我整理了几种解决的方案 方案（一）：将width采用百分比设置   虽然
如何让div宽度自动填满剩余的宽度
前端那些事
07-18 1万+
width: calc(100% - 200px);
html三行两列div布局
09-09
这个HTML三行两列的布局是由著名网页设计师阿捷在2004年发布在《网页设计师》杂志上的，被称为XHTML1标准的DIV CSS布局。它是一个非常经典的布局，可以在IE、Mozilla和Opera浏览器中实现居中和高度自适应。完整的代码如下所示： ```html <!-- 双飞翼布局 --> <div class="container"> <div class="middle"> <div class="inner">中间自适应</div> </div> <div class="left">左边固定宽度200px</div> <div class="right">右边固定宽度200px</div> </div> ``` 对应的CSS代码如下所示： ```css <style> * { margin: 0; padding: 0; } .container { min-width: 600px; height: 300px; background: pink; } .middle { float: left; width: 100%; height: 300px; background-color: turquoise; } .middle .inner { margin: 0 200px; } .left { float: left; width: 200px; height: 300px; margin-left: -100%; background-color: teal; } .right { float: left; width: 200px; height: 300px; margin-left: -200px; background-color: seagreen; } </style> ``` 这种布局的主要特点是中间的自适应部分被嵌套在一个新的父级块中，通过设置左右外边距来实现布局调整。左边和右边的固定宽度部分则通过负外边距进行布局。这种布局可以有效地实现三行两列的效果。注意，这种布局方式增加了一层DOM树节点，可能会增加渲染树生成的计算量。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值