首页日志正文
响应式网站布局div盒子高度问题
日期:2022-11-16 10:24:54 人气:0
在响应式布局中经常碰到这样的情况,如两个并排的div盒子(当然也可是多个并排的div盒子),一个盒子里面放的是图片(在这里我们称为A盒子),一个盒子里面放的是文字描述内容(在这里我们称为B盒子),两个盒子各占整个页面宽度的50%(或者有多个div盒子宽度一样,或者多个div盒子宽度不一样,其中有一个或多个盒子包裹一张图片),然而高度要求一样;这样就造成了在适应不同大小的屏幕时,A盒子高度会随图片的改变而改变,而B盒子高度不会出现变化,影响布局和页面的美观。
下面这张图片能够让大家有清楚的认识,效果如图:
<div class="box clear">
<div class="box1"><img src="...." alt="王英杰博客"></div>
<div class="box2">这里是王英杰博客的文字</div>
</div>
在响应式网站设计布局中,不能设置固定高度,高度要随浏览器宽度的变化而变化,这里想到了JS来设置高度来解决。因为我在这里用得jquery的版本较低,所以用的是$(window).load(function(){}),高版本请用$(window).on(“load”,function(){})。
JS如图:
<script>
$(window).load(function(){
var _Hig = $(".box .box1 img").outerHeight();
$(".box .box2").css("height", _Hig);
$(window).resize(function () {
var _Hig = $(".box .box1 img").outerHeight();
$(".box .box2").css("height", _Hig)
});
});
</script>
效果如图:
A、B两个盒子的高度一致了,不管浏览器的宽度怎么变化,两个盒子的高度始终一致。
---------------------------------------------------------------------
(从死了一次又一次终于挂掉的百度空间中抢救出来的,发表日期 2014-06-27)
想要DIV的高度随内容自适应,(主要用于div有边框样式的)
使用overflow:hidden,可以div边框紧贴内层边框。
还可以通过设置清楚浮动来实现该功能,将内部内容的最下方添加一个空白div,来清除浮动。清楚浮动的css代码:略。
补充:
让DIV高度自适应,这是在网页设计中常遇到的问题,为了给大家提供参考,这里提供3种div高度自适应的方法:一是JS法、二是背景图填充法、三是“补丁大法”(比较变态)。
1、JS法
代码如下。原理:用JS判断左右DIV的高度,若不一致则设为一致。
<div style="width:500px;background:#cccccc;height:0px;">
<div id="right" style="width:380%;height:100%;float:left;border:1px solid #265492;">left</div>
<div id="left" style="width:60%;;float:left;background:#376037;">
right<br>
right<br>
right<br>
right<br>
right<br>
right<br>
right<br>
</div>
</div>
<script type="text/javascript">
<!--
var a=document.getElementById("left");
var b=document.getElementById("right");
if(a.clientHeight<b.clientHeight){
a.style.height=b.clientHeight+"px";
}else{
b.style.height=a.clientHeight+"px";
}
-->
</script>
2、背景图填充法
这是大站用得比较多的方法,如163等,研究了一下,结果如下。
这里是给父DIV设置了背景图片填充,所有DIV都不设高度。
HTML代码:
<div class="endArea">
<div class="col1">第一列 左边正文</div>
<div class="col3">第二列 右边<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />字字</div>
<div class="col2">第三列 中间图片</div>
<div class="clear"></div>
</div>
CSS代码:
endArea{margin:0 auto; width:960px; background:url(http://cimg2.163.com/cnews/img07/end_n_bg1.gif); clear:both;}endArea .col1{float:left; width:573px; }endArea .col2{float:left; width:25px; }endArea .col3{float:right; width:362px;}
3、补丁大法
就是“隐藏容器溢出”和“正内补丁”和“负外补丁”结合的方法。比较另类的方法,在IE6、IE7、FF3下测试通过。要点:
1、父DIV设置 overflow:hidden;
2、对要高度自适应的DIV设置 padding-bottom:100000px;margin-bottom:-100000px; 两列或多列同理。
代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Div高度自适应</title>
<style type="text/css">
#wrap{overflow:hidden;}
#sidebar_left,#sidebar_right{padding-bottom:100000px;margin- bottom:-100000px;}
</style>
</head>
<body>
<div id="wrap" style="width:300px; background:#FFFF00;">
<div id="sidebar_left" style="float:left;width:100px; background:#777;">居左</div>
<div id="sidebar_mid" style="float:left;width:100px; background:#999;">
居中<br />
居中<br />
居中<br />
居中<br />
居中<br />
居中<br />
居中<br />
</div>
<div id="sidebar_right" style="float:right;width:100px; background:#888;">居右</div>
</div>
</body>
</html>
以上三种方法都可以解决Div高度自适应,请根据你自己的需要,三选一