div如何自适应高度100%
如题,要兼容主流浏览器,同时不管页面多高里,底部都在页面的最下边,不够高时,为100%。注:底部不要绝对定位。...
如题,要兼容主流浏览器,同时不管页面多高里,底部都在页面的最下边,不够高时,为100%。
注:底部不要绝对定位。 展开
注:底部不要绝对定位。 展开
5个回答
展开全部
一、用背景图填充法
这里是给父DIV设置了背景图片填充,所有DIV都不设高度。
HTML代码:
1 <div class="endArea">
2 <div class="col1">第一列 左边正文</div>
3 <div class="col3">第二列 右边<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />字字</div>
4 <div class="col2">第三列 中间图片</div>
5 <div class="clear"></div>
6 </div>
CSS代码:
1 .endArea{margin:0 auto; width:960px; background:url(http://cimg2.163.com/cnews/img07/end_n_bg1.gif); clear:both;}
2 .endArea .col1{float:left; width:573px; }
3 .endArea .col2{float:left; width:25px; }
4 .endArea .col3{float:right; width:362px;}
二、DIV的加单介绍:
DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。
DIV在编程中又叫做整除,即只得商的整数。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。
这里是给父DIV设置了背景图片填充,所有DIV都不设高度。
HTML代码:
1 <div class="endArea">
2 <div class="col1">第一列 左边正文</div>
3 <div class="col3">第二列 右边<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />字字</div>
4 <div class="col2">第三列 中间图片</div>
5 <div class="clear"></div>
6 </div>
CSS代码:
1 .endArea{margin:0 auto; width:960px; background:url(http://cimg2.163.com/cnews/img07/end_n_bg1.gif); clear:both;}
2 .endArea .col1{float:left; width:573px; }
3 .endArea .col2{float:left; width:25px; }
4 .endArea .col3{float:right; width:362px;}
二、DIV的加单介绍:
DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。
DIV在编程中又叫做整除,即只得商的整数。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。
2012-06-30
展开全部
额,不鄙视推荐这个推荐答案的人了,也不鄙视楼上的异想天开了,直接给你介绍个思路:
100%宽度可以直接用样式,100%高度最好的办法是用js来解决,js监测浏览器高度,然后根据监测到的高度给div设置高度值,至于js怎么监测浏览器高度,网上都有介绍楼主自己百度一下 ,按照楼主的要求同时还要注意页面高度,当页面高度大于时浏览器高度时,直接取页面高度
100%宽度可以直接用样式,100%高度最好的办法是用js来解决,js监测浏览器高度,然后根据监测到的高度给div设置高度值,至于js怎么监测浏览器高度,网上都有介绍楼主自己百度一下 ,按照楼主的要求同时还要注意页面高度,当页面高度大于时浏览器高度时,直接取页面高度
追问
这个思路偶也知道啊,js要兼容所有浏览器,有点难啊
追答
不难的,多个判断,主要是IE内核和非IE内核不一样,其实网上有现成的代码,你百度搜一下"js检测浏览器宽高"
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
这个比较简单啊
<div id="div_body" style="margin:0 auto;witdh:1024px">
这样设置,高度为自动适应内容高度,宽度为1024px
div 剧中显示
<div id="div_body" style="margin:0 auto;witdh:1024px">
这样设置,高度为自动适应内容高度,宽度为1024px
div 剧中显示
追问
傻帽
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
先设置html及body的CSS的高,分别为height:100%
如下:
html,body{height:100%;margin:0px;}
或
html{height:100%;}
body{height:100%;margin:0px;}
后面的高为100%才有效:
<table height="100%">
或
<div style="height:100%;">
如下:
html,body{height:100%;margin:0px;}
或
html{height:100%;}
body{height:100%;margin:0px;}
后面的高为100%才有效:
<table height="100%">
或
<div style="height:100%;">
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
<div style="height:100%;overflow:hidden;border:1px solid #000;width:100px"></div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询