DIV 布局设置高度100%

最新推荐文章于 2024-05-30 22:05:48 发布
最新推荐文章于 2024-05-30 22:05:48 发布
阅读量105 收藏
点赞数
文章标签： 人工智能
原文链接：http://www.cnblogs.com/weiqt/articles/2535033.html
版权

 

DIV 高度100%,也是我们比较常用的一个做法，那么如何高度100%自适应和兼容所有的浏览器是我们今天要讨论的小技巧。

一个简单的应用场景是：

1
2
3
4
5
6
7

    <!DOCTYPE html>
    <html>
        <head></head>
        <body>
             <div id="content">内容</div>
        </body>
    </html>

根据上面的场景，我们要实现，ID为content的DIV高度100%，我们首先想到的做法是

1
2

html,body{height:100%;}
#content{height:100%;}

内容满一屏或小于一屏的时候正常以上做法还能用，相反内容超过一屏的时候，ID为content的DIV设置的背景色或背景图片时就不是那么完美了，这个时候它只有一屏背景色或背景图片，超出一屏在第二屏显示的就没有背景色或背景图片了，被截取了。

这个时候，通过测试发现IE6坚挺着，没问题，满足需求。而其它的ie7+ 和 moz & webkit 核心的浏览器都无法满足需求。

接下来，就需要我们补救了。

1
2
3
4
5
6

html,body{height:100%;}
#content{
	height:auto!important; /*for ie6 bug and ie7+,moz,webkit 正确*/
	height:100%; /*修复IE6,all browser*/
	min-height:100%; /*for ie6 bug and ie7+,moz,webkit 正确*/
}

就这样,DIV 高度100% 自适应完美的实现了。

放出另一个案例,”用Div模仿Frame框架（简单的，酷的）",就是“DIV 高度100%”的集中应用。

 

该日志于2011-08-09 17:18由 Rainbow 发表在 HTML/CSS分类下　　　　　　

转载于:https://www.cnblogs.com/weiqt/articles/2535033.html

weixin_30457551
关注
div设置width:100%,height:100%，background-color:red但是在页面上不显示
m0_46404398的博客
03-23 1597
最近在学习react，在使用antd的layout组件时，发现直接复制模板代码显示的效果和样例不一样： function App() { return ( <Layout> <Sider>Sider</Sider> <Layout> <Header>Header</Header> <Content
外部div宽度为100%，内部div宽度也为100%，内部div整体水平居中
missing_IT的博客
11-10 1452
在vue中，从外部传入table，但是没有提供宽度任何样式信息使传入的html整个标签居中
CSS设置盒子容器(div)高度(height)始终为100%
11-19
前言 有时需要让一个盒子容器的 高度始终保持100%，无论怎么缩放浏览器高度始终不变。就像一些网站的侧边栏，但直接设置盒子容器的高度为100%是不起作用的。 demo 如果想让一个元素的百分比高度height: 100%;起作用，你需要给这个元素的所有父元素的高度设定一个有效值。拿下面的demo谈，div的父元素有body、html这两个，那么只要把父元素与自身元素都设置为100%高度即可。 <!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> <div>我想拥有100%高度，我可以随意任浏览器缩放。</d
设置div高度为100%
wr_mroo的博客
09-02 3260
直接使用如下代码设置div的宽度和高度时，div宽度会铺满屏幕，而高度为零。<div style="width:100%;height:100%"></div>原因：浏览器会直接计算窗口的宽度，作为容器宽度的缺省值。但是并不会计算窗口的高度，只是简单的向下堆砌。解决方法： 1.为该元素的所有父元素设置宽度为100%。<html style="height: 100%;padding: 0;marg
div高度100%`
david___的博客
01-10 429
在设置DIV高度的时候，会用到一个height:100%的大小，来让div撑满浏览器高度。但是我们会发现，直接在div中写上“style:"height:100%;"”是无效的。那么如何才能让div的css height:100%生效呢？解决办法很简单…… div{ height: 100%; width: 100%; } 这样是没用的，因为body和html都没有高度，如果没有
【CSS系列】height:100%设置div的高度
weixin_34290352的博客
08-16 234
一、div设置百分百高度实现描述 在html布局中body内第一个div盒子对象设置100%高度height样式，是无法成功显示100%高度的。这个是因为body高度默认值为自适应的，所以及时设置body第一个布局div高度为百分比也是无效的，因为div解析上级高度为0，自然div height 100%实际高度也为0。 浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。...
div高度、宽度100%|div width、height 100% - div100%
xbbccx的专栏
02-26 1483
正像你所知道的那样，设置DIV大小的有两个属性width和height，以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑，不明确这个100%的宽度（高度）到底有多宽有多高？这个100%是从哪里得到的从哪里继承的？今天我们的话题就是有关div高度100%的问题！ 其实，要弄懂div宽度|width100%、div高度|height100%到底是怎么实现的，只需弄懂一个简单的问题就可以了
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
09-28
在网页布局设计中，我们经常会遇到这样一个问题：当一个元素（如`div`）的宽度设置为`width: 100%`时，如果再添加`padding`或`margin`，元素的总尺寸会超出其父元素的宽度，导致布局混乱。为了解决这一问题，我们...
给div设置height：100%
weixin_43540912的博客
11-18 1354
div设置100%的高度前提需要其所有的父元素都有高度，才能生效。 例如让一个div占满整个页面的高度， 就需要将html和body都设置为height：100%
高度100%div的实现
我的地盘
04-20 402
xmlns="http://www.w3.org/1999/xhtml"> http-equiv="Content-Type" content="text/html; charset=gb2312" /> 高度100%div type="text/css"> body{height:100%;margin:0;padding:0;} div{width:100px;h
div设置百分百高度实现
xvzhengyang的博客
04-19 3040
在html布局中body内第一个div盒子对象设置100%高度height样式，是无法成功显示100%高度的。这个是因为body高度默认值为自适应的，所以及时设置body第一个布局div高度为百分比也是无效的，因为div解析上级高度为0，自然div height 100%实际高度也为0。 浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。 因为页面并没有缺省的高度值，所以，当你让...
div高度100%,div宽度100%
09-03 607
正像你所知道的那样，设置DIV大小的有两个属性width和height，以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑，不明 确这个100%的宽度（高度）到底有多宽有多高？这个100%是从哪里得到的从哪里继承的？今天我们的话题就是有关div高度100%的问题！ 其实，要弄懂div宽度|width100%、div高度|height100%到底是怎么实现的，只需弄懂一个简单的...
给DIV设置高度百分百
weixin_30888027的博客
12-21 241
那么，如果想让一个元素的百分比高度height: 100%;起作用，你需要给这个元素的所有父元素的高度设定一个有效值。换句话说，你需要这样做： <html> <body> <div style="height: 100%;"> <p> 想让这个div高度为 100% 。 </p&g...
如何使div的浏览器窗口高度为100％
weixin_39363245的博客
05-07 468
我有两列的布局-左div和右div。 右边div有一个灰色background-color，我需要根据用户浏览器窗口的高度垂直扩展它。现在background-color结束于该内容的最后一部分div。 我试过height:100%，min-height:100%;等 有几个CSS 3度量单位，称为： 视口百分比（或相对于视口）长度 什么是视口百分比长度？ 根据上面链接的W3候选推荐书： 视口百分比长度相对于初始包含块的大小。更改初始包含块的高度或宽度时，将对其进行相应缩放。 这些单位是
关于div宽度和高度的100%设定的问题
weixin_45806273的博客
11-23 2838
设置DIV大小的有两个属性width和height，以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑，不明白这个100%的宽度（高度）到底有多宽有多高？这个100%是从哪里得到的从哪里继承的？今天我们的话题就是有关div高度100%的问题！ 其实，要弄懂div宽度|width100%、div高度|height100%到底是怎么实现的，只需弄懂一个简单的问题就可以了，即100%的基数...
如何使浏览器窗口的 div 高度为 100%
HuntsBot的博客
01-02 1119
我有一个包含两列的布局 - 左 div 和右 div。右边的 div 有一个灰色的 background-color，我需要它根据用户浏览器窗口的高度垂直展开。现在，background-color 结束于该 div 中的最后一段内容。我试过 height:100%、min-height:100%; 等。
如何使用 CSS 将 div 的高度设置为 100%
最新发布
qq_25153359的博客
05-30 747
将 div 容器的高度设置为浏览器窗口的 100%，它不起作用，因为百分比 (%) 是一个相对单位，因此结果高度取决于父级元素的高度。元素的高度也设置为100%，结果容器div的高度就等于浏览器窗口的100%高度。div 有两个父元素：例如，如果您考虑以下示例，如果您尝试使用样式规则。
ie7 height 100%无效解决办法
Web前端开发
12-29 1578
position:absolute http://www.cnblogs.com/huangyong8585/archive/2013/02/05/2893058.html
解决IE6下div无法100%填充高度的问题
因此，当页面内容不足时，设置body或div为100%高度并不会填满整个视口。 解决这个问题的一种方法是利用CSS中的`min-height`属性。然而，IE6并不支持这个属性，所以我们需要采用一种叫做“hasLayout”的技巧。`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值