由于设计页面需要,要把两个并排显示的div实现一样高的效果,n行n列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标。方法有以下几种:1、JS实现(判断2个div高);2、纯css方法;3、加背景图片实现。首先说下本博客实现的2个div一样高的方法(即js方法)。
div+css基本布局:
<div id="mm">
<div id="mm1"></div>
<div id="mm2"></div>
</div
>
1、js实现div自适应高度
代码如下:
<script type="text/javascript">
<!--
window.onload=window.onresize=function(){
if(document.getElementById("mm2").clientHeight<document.getElementById("mm1").clientHeight){
document.getElementById("mm2").style.height=document.getElementById("mm1").offsetHeight+"px";
}
else{
document.getElementById("mm1").style.height=document.getElementById("mm2").offsetHeight+"px";
}
}
-->
</scri
pt>
(注:网上公布了不少方法,但代码或多或少有错;上面的是无错代码;我测试在IE6.0/IE7.0下通过,考虑绝大数人仍然用的是IE,所以并没有在opera和firefoxs下调试,哪位用的是opera或ff,可以帮忙看看飘易博客的DIV是否保持了一致的高度。)
2、纯CSS方法
css里代码(调试通过,但不会显示div下边框,即border-bottom):
/*左右自适应相同高度start*/
#m1,#m2
{
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
@media all and (min-width: 0px) {
#m1,#m2
{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#m1:before, #m2:before
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
background: inherit;
padding-top: 32767px !important;
margin-bottom: -32767px !important;
height: 0;
}
}
/*左右自适应相同高度end*/
3、加背景图片
这个方法,很多大网站在使用,如163,sina等。
XHTML代码:
<div id="wrap">
<div id="column1">这是第一列</div>
<div id="column1">这是第二列</div>
<div class="clear"></div>
</div>
CSS代码:
#wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}
#column1{ float:left; width:300px;}
#column2{ float:right; width:476px;}
.clear{ clear:both;
}
还有其他的一些方法,但主流就是这几种了。如果你还有关于多个div自适应高度的好的代码,请给我们留言,欢迎与我们讨论。
分享到:
相关推荐
本篇文章将深入探讨如何利用JavaScript(JS)和CSS结合来解决div自适应高度的问题。 首先,我们需要理解CSS在布局中的作用。CSS(层叠样式表)用于定义网页元素的样式,包括尺寸、颜色、位置等。对于div自适应高度...
我们可以使用以下代码来实现DIV层的自适应高度: ``` function autoHeight(){ if (window.innerHeight){ nowHeight = window.innerHeight; }else{ nowHeight = document.documentElement.clientHeight; } var ...
div+CSS自适应高度,需要的朋友请下载
本教程将详细介绍如何使用 `div` 和 `css` 创建一个自适应的 `Tab` 控件。 首先,我们需要理解 `div` 的概念。`div` 是 HTML 中的一个块级元素,全称为 "division",用于对网页内容进行分组和布局。在 `Tab` 实现中...
通过上述两种方法的结合使用,我们就可以解决在网页布局中常见的左右两侧DIV自适应高度以及DIV高度自适应屏幕的布局问题。这不仅有助于保持页面布局的整洁和一致性,而且能够提升网页在不同设备和屏幕尺寸上的适应性...
本篇文章将深入探讨`div`的一些进阶效果,包括圆角`div`、自适应宽度、背景色渐变、多行自适应高度以及固定高度与内容自动变高等CSS技术。 首先,让我们关注圆角`div`。CSS3引入了`border-radius`属性,使得我们...
总的来说,CSS+div自适应窗口宽度主要依靠`min-width`, `width`, `float`和百分比单位等属性来实现。通过合理的布局和JavaScript辅助,可以创建出适应不同屏幕尺寸的响应式网页,确保在各种设备上提供良好的用户体验...
div+css高度自适应网页布局,子div含float,父div高度自适应,已经通过测试的浏览器:ie6、ie7、ie8、火狐、Chrome。 代码来源: http://www.positioniseverything.net/articles/onetruelayout/equalheight
### div+css高度自适应详解 #### 一、引言 在前端开发中,随着屏幕尺寸的多样化以及响应式设计的需求日益增长,实现元素的高度自适应成为了一个重要的课题。高度自适应不仅能够确保页面在不同设备上的良好展示,还...
当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了,但容器main的高度还是不能撑开。
总结来说,要实现左右div自适应高度,首先需要理解不同属性如 `clientHeight` 和 `offsetHeight` 的定义和作用。然后,通过合理的JavaScript代码,结合jQuery库,根据元素的当前高度来动态调整,确保两者的高度同步...
"button自适应高度和自动换行"这个主题主要关注如何让按钮在不同屏幕尺寸和内容长度下保持良好的视觉效果。以下是对这个主题的详细解释: 一、自适应高度 1. CSS Flexbox:使用Flexbox布局模型可以轻松实现按钮的...
-百分比单位:使用百分比设置宽度和高度,可以让Div根据其父元素的大小进行自适应。 - 弹性盒模型(Box Sizing):通过`box-sizing: border-box;`使元素的边框和内填充计算在总宽度和高度内。 4. **实战应用**: ...
这里的`.container`是我们要自适应高度的`div`,它的高度将基于`body`元素(现在已设置为浏览器高度)来计算。`box-sizing: border-box`属性使得边框和内边距不会增加元素的实际尺寸,确保`div`的高度仍为`100%`。 ...
Div即父容器不根据内容自适应高度,我们看下面的代码: 复制代码代码如下: <div id=”main”> <div id=”content”></div> </div> 当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好...
<div class=A> 头部DIV </div> <div class=B>下部DIV </div> </div> CSS: html, body { height: 100%; padding: 0; margin: 0; } .outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; ...
“自适应高度”是指网页元素(如div、iframe或任何其他容器)能够根据其内容或周围环境动态调整自身高度,确保内容不会被截断或溢出。在传统的网页设计中,这可能需要复杂的CSS和JavaScript来实现。而这个自适应高度...
### iframe自适应高度(兼容多种浏览器) 在网页开发过程中,`iframe`是一种常用的元素,用于在当前页面中嵌入另一个HTML文档。然而,默认情况下,`iframe`的高度是固定的,这可能会导致内容显示不完全或者出现不必要...
然而,仅使用CSS无法处理图片高度自适应,因为图片原始比例可能与div比例不一致。这时,我们需要借助JavaScript来动态调整图片高度。以下是一个简单的JavaScript解决方案: ```javascript window.onload = function...