布局：上下两个div高度固定，中间自适应

最新推荐文章于 2024-08-05 00:42:25 发布
最新推荐文章于 2024-08-05 00:42:25 发布
阅读量582 收藏
点赞数
原文链接：http://www.cnblogs.com/LO-ME/p/7375648.html
版权

需求：经典布局 —— 头尾固定高度中间高度自适应布局

头部固定高度，宽度100%自适应父容器；

底部固定高度，宽度100%自适应父容器；

中间是主体部分，自动填满，浏览器可视区域剩余部分，内容超出则中间部分出现流动条；

整个内容填满浏览器可视区域，并且不超出此区域！

 

方法一：position:absolute定位，不设高，并改变"包含块"的尺寸渲染

固定头尾，所以，至少头和尾要用到position定位。因为浏览器大小是可以调节的，而且不同尺寸，不同分辨率的浏览器可视区域的高度是不固定的，

这就决定是中间主体部分的高度不固定。所以真正的问题核心也正在此。解决了这个问题，整个布局也就解决了一多半

最重要的一段就是中间部分绝对定位，top为头的高度，bottom为尾的高度

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="gb2312">
    <title>头尾固定中间高度自适应布局</title>
    <style>
        html, body {
            height:100%;
            margin:0;
            padding:0
        }
        #dHead {
            height:100px;
            background:#690;
            width:100%;
            position:absolute;
            z-index:5;
            top:0;
        }
        #dBody {
            background:#FC0;
            width:100%;
            overflow:auto;
            position:absolute;
            z-index:10;
            top:100px;
            bottom:100px;
        }
        .mycontent {
            padding:20px;
        }
        #dFoot {
            height:100px;
            background:#690;
            width:100%;
            position:absolute;
            z-index:200;
            bottom:0;
        }
    </style>
</head>
<body>
    <div id="dHead">固定头部100px;</div>
    <div id="dBody">
        <div class="mycontent">
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
            中间自适应部分<br>
        </div>
    </div>
    <div id="dFoot">固定尾部100px</div>
</body>
</html>

效果如下：

经测试：IE7+、firefox、chrome、safari、opera均通过测试！

 

 

方法二：利用boxsizing改变盒子模型

实现原理是，先为html设定box-sizing然后，加上上下padding值。布局模块均采用position:relative定位。

然后，头部采用负向margin向上平移（因为有了html padding），如查采用负top的话需要为每个布局版加上负top;看实现代码：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="gb2312">
    <title>头尾固定中间高度自适应布局</title>
    <style type="text/css">
        * {
            margin:0;
            padding:0;
        }
        html {
            -webkit-box-sizing:border-box;
            -moz-box-sizing:border-box;
            box-sizing:border-box;
            padding:100px 0;
            overflow:hidden;
        }
        html, body {
            height:100%;
        }
        .top {
            position:relative;
            top:-100px;
            height:100px;
            background:#f60;
        }
        .side {
            top:-100px;
            position:relative;
            height:100%;
            background:#fc0;
            overflow:auto;
            width:200px;
            float:left;
            margin-right:0 !important;
            margin-right:-3px;
            overflow:auto;
        }
        .main {
            top:-100px;
            position:relative;
            overflow:auto;
            height:100%;
            background:#f30;
        }
        .bottom {
            top:-100px;
            position:relative;
            height:100px;
            background:#f60;
            clear:both;
        }
    </style>
</head>
<body>
<div class="top"> top </div>
<div class="side"> side <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</div>
<div class="main"> main <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</div>
<div class="bottom"> bottom </div>
</body>
</html>

效果如下：

此IE6/IE7是不支持的，另外如果给头部是absolute定位的话也是可以实现的

<style type="text/css">
    * {
        margin:0;
        padding:0;
    }
    html {
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
        padding:100px 0;
        overflow:hidden;
    }
    html, body {
        height:100%;
    }
    .top {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100px;
        background:#f60;
    }
    .side {
        height:100%;
        background:#fc0;
        width:200px;
        float:left;
        margin-right:0 !important;
        margin-right:-3px;
        overflow:auto;
    }
    .main {
        overflow:auto;
        height:100%;
        background:#f30;
    }
    .bottom {
        position:relative;
        height:100px;
        background:#f60;
        clear:both;
    }
</style>
</head>
<body>
    <div class="top"> top </div>
    <div class="side"> 
        side 
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    </div>
    <div class="main"> 
        main 
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    </div>
    <div class="bottom"> bottom </div>
</body>
</html>

 

转载于:https://www.cnblogs.com/LO-ME/p/7375648.html

dbp5156
关注
flex实现上下固定中间自适应的三栏布局
weixin_43848807的博客
06-06 656
flex实现上下固定中间自适应的三栏布局
三栏布局：左右固定宽，中间自适应的几种方式
http____的博客
05-31 439
要求 三个div占满一行，左右两个div宽为100px，中间的div自适应宽度，时刻保持三个div占满一行 实现方法 1. 浮动 float 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor
html上下固定中间自适应div+css布局
09-03
html5新标签使用header、footer、nav、section布局，css设定及使用方法
如何让左右两个div各占50%，并且高度相同？
最新发布
两天打鱼三天晒网
08-05 367
如何设置两个div各占一半，并且高度随着内容增加，而且两边div的高度一致呢？默认会发现高度不一致，改用flex就可以了，另外发现传统的table也可以轻易实现。不知道不用flex的话是否可以实现。
上下DIV固定,中间DIV自适应的HTML+CSS实现
kurisu的咸鱼生活
04-24 7228
项目快结了，所以就做一下总结，以便以后复习。 项目主页的左侧菜单部分，界面要求就是上方为项目logo以及显示用户，下方需要显示版权，中间部分就是显示菜单选项。废话不多说，直接上代码。 HTML: CSS: .header{ position:absolute; top
CSS实现自适应高度布局：头部底部固定，中间自适应铺满屏幕剩余高度，中间盒子里左盒子固定右盒子自适应宽度
liona_koukou的博客
09-26 2万+
如题：顶部底部固定高度，中间部分铺满屏幕剩余高度，中间盒子里又左盒子固定宽度，右盒子自适应宽度且距左盒子总是20px 主要解决方法是中间盒子的top:40px;bottom:40px;设置。原理是在position是absolute时同时设置top和bottom或者同时设置left和right，高度或宽度会被拉伸到指定位置 如图： 实现代码：     &lt;!DOCTYPE...
css实现上下固定中间自适应
weixin_45825917的博客
03-12 785
css
css 两边固定中间自适应布局的实现
09-22
在众多布局需求中，实现“两边固定、中间自适应”的页面布局是一个常见的设计需求。它指的是页面的左、右两侧内容区域宽度固定，而中间的内容区域能够自适应剩余空间的宽度。这种布局在响应式网页设计中尤为常见。在...
父div高度不能自适应子div高度的解决方案
10-25
当父div没有设置固定高度而其内部的子div由于内容多而高度超过了父div时，就会出现父div无法完整包裹子div的现象。为了解决这个问题，可以采用以下几种方法： 第一种解决方案是在父div的最下方加入一个空白div，这...
父级div高固定 子级两个div上下 上边div高固定 下边自适应
weixin_33825683的博客
07-31 233
2019独角兽企业重金招聘Python工程师标准>>> ...
html上下两个div布局,常见上下两列div+css布局技巧整理【转载】
weixin_42129300的博客
06-10 6158
在百度搜索‘左右布局’，发现好多朋友在问这个问题，特将上周学到的左右布局技巧整理分享给大家：)常见的左右两列div+css布局分为以下两种：一、左右定宽布局：在css分别指定了左右两列的宽度的情况下，只需要将左边的div 向左浮动{float:left;}，右边的div 向右浮动{float:right;}，并清除浮动，即可实现。常用的清除浮动有两种方式：a、通过在浮动元素的父级元素上添加清除浮动...
10 分钟理解 BFC 原理
qq_30325409的博客
03-07 302
一、常见定位方案在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案:普通流 (normal flow)在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中...
css如何让两个div上下排列_深入了解CSS层叠上下层
weixin_39610956的博客
11-21 1万+
1.要想理解层叠上下层，首先要先从文档流和盒模型说起文档流在CSS中，文档流是一个很基础也是很重要的一个概念。很多时候她被称为Document Flow，但在CSS的标准被称为Normal Flow，即普通流或常规流。大家更喜欢称之为文档流。那么CSS的文档流是怎么一回事呢？在HTML中任何一个元素其实就是一个对象，也是一个盒子。在默认情况下它是按照出现的先后顺序来排列，而这个排列的顺序就是文档流...
顶部底部固定 中间文字溢出，滚动导航条
qq_43198727的博客
04-16 218
顶部底部固定中间文字溢出显示导导航条
css如何让两个div上下排列_如何讲清楚Flex弹性盒模型？(上)
热门推荐
weixin_39600331的博客
11-21 3万+
一、什么是Flex弹性盒？Flex弹性盒，意为“弹性布局”，用来为盒状模型提供最大的灵活性。当一个元素 display:flex 的时候，内部元素float会失效，vertical-align也会失效因此我们至少能确定一点，flex替代了浮动的解决方案。我们来看一下它的基本特点。在flex容器当中，div这样的块元素不再独占一行而是自动排成一行。这个效果虽然和浮动很像, 但是请记住, 在fle...
css如何让两个div上下排列_CSS知识总结
weixin_39817012的博客
11-21 9009
一、CSS简介CSS，全拼Cascading Style Sheets，层叠样式表，是由Tim Berners Lee的同事赖先生（Håkon Wium Lie）首先提出的，目前使用最广泛的版本为CSS2.1。二、CSS语法① 选择器 { 属性名：属性值；}② @语法 @charset "UTF-8"; @import url(2.css); @media (...
全屏css div页面上中下三行布局,CSS布局实例:上中下三行,中间自适应
weixin_32407355的博客
08-03 885
CSS布局实例:上中下三行布局，上下定高，中间栏自适应浏览器高度，且内容垂直居中。本文代码在firefox 2.0 / win ie 6/ win ie 7 /opera 8.5 cn/win safari 测试通过。对于非ie内核浏览器，通过设定display:table、display:table-row和display:table-cell来模拟表格的表现形式。最外层#box { displ...
(div+css)上下固定中间自适应高度网页布局的实现
sosohotsummer的专栏
02-10 1672
html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> title>上下固定中间自适应高度布局title> style type="text/css">     html     {             m
CSS三栏布局解析：中间固定，两侧自适应
作者首先回顾了另一种常见的三栏布局，即左右两栏固定，中间栏自适应宽度，然后详细介绍了使用绝对定位法来实现中间固定两侧自适应的布局方法。" 在CSS布局设计中，三栏布局是一种常见的需求，特别是在网页设计中。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值