在使用DIV和CSS进行网页布局中，DIV的自适应高度和自适应宽度是一个很常见的问题。
为了保证页面的整体美观性，需要将两个或者多个层的高度/宽度保持一致。
这里有两种常用的解决方案：
1.通过javascript脚本来动态的设置每个层的高度/宽度。
2.通过纯CSS来设置属性。
这里只阐述一下第一种方法：
//脚本代码
<script type="text/javascript">
function initdiv(){
var div1 = document.getElementById("content");
var div2 = document.getElementById("right");
var h1 = div1.clientHeight;
var h2 = div2.clientHeight;
var height;
if(h1>h2)
height=h1;
else
height=h2;
div1.style.height=height+"px";
div2.style.height=height+"px";
}
</script>
//HTML代码片段
<body onload="initdiv();" onresize="initdiv();">
<div id="container">
<div id="header">★Header★<br/>The Header Of The Page</div>
<div align="right"><a href="#">Regist</a> <a href="#">Login</a></div>
<div id="center">
<div id="content"><ul><li>Content1</li><ul><li>Content2</li></ul><ul><li>Content3</li></ul><ul><li>Content4</li></ul></div>
<div id="right">
<li>Left</li>fffffffffffffffffffffffffffffffffffffffffffff
<li>Left</li>ffffffffffffffffffffffffffffffffffff
<li>Left</li>fffffffffffffffffffffffffffff
<li>Left</li>fffffffffffffffffffffffffffffffffffffffffff
<li>Left</li>ffffffffffffffffffffffffffffffffffffffff
<li>Left</li>fffffffffffffffffffffffffffffffffffffffffff
<li>Left</li>fffffffffffffffffffffffffffffffffffffffff
<li>Left</li>fffffffffffffffffffffffffffffff
</div>
</div>
<div id="footer">Made By Jacky<br/>wuhongxian@163.com QQ:68147527</div>
</div>
</body>
分享到：
相关推荐
本篇文章将深入探讨如何利用JavaScript（JS）和CSS结合来解决div自适应高度的问题。 首先，我们需要理解CSS在布局中的作用。CSS（层叠样式表）用于定义网页元素的样式，包括尺寸、颜色、位置等。对于div自适应高度...
div+CSS自适应高度，需要的朋友请下载
通过上述两种方法的结合使用，我们就可以解决在网页布局中常见的左右两侧DIV自适应高度以及DIV高度自适应屏幕的布局问题。这不仅有助于保持页面布局的整洁和一致性，而且能够提升网页在不同设备和屏幕尺寸上的适应性...
实现DIV层自适应高度和宽度 在网页设计中，DIV层的自适应高度和宽度是非常重要的，因为它可以使网页适应不同的浏览器大小和分辨率，从而提高用户体验。以下是使用JS+CSS来实现DIV层自适应高度和宽度的知识点： 一...
总结来说，要实现左右div自适应高度，首先需要理解不同属性如 `clientHeight` 和 `offsetHeight` 的定义和作用。然后，通过合理的JavaScript代码，结合jQuery库，根据元素的当前高度来动态调整，确保两者的高度同步...
### CSS `min-height` 在IE6、IE7与Firefox下的DIV自适应高度解决方案 #### 背景介绍 在Web开发的历史长河中，不同浏览器对CSS的支持程度一直是开发者们面临的一大挑战。尤其是在早期，Internet Explorer 6 (IE6) ...
本篇文章将深入探讨`div`的一些进阶效果，包括圆角`div`、自适应宽度、背景色渐变、多行自适应高度以及固定高度与内容自动变高等CSS技术。 首先，让我们关注圆角`div`。CSS3引入了`border-radius`属性，使得我们...
<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 ; ...
总的来说，CSS+div自适应窗口宽度主要依靠`min-width`, `width`, `float`和百分比单位等属性来实现。通过合理的布局和JavaScript辅助，可以创建出适应不同屏幕尺寸的响应式网页，确保在各种设备上提供良好的用户体验...
这里的`.container`是我们要自适应高度的`div`，它的高度将基于`body`元素（现在已设置为浏览器高度）来计算。`box-sizing: border-box`属性使得边框和内边距不会增加元素的实际尺寸，确保`div`的高度仍为`100%`。 ...
当Content内容多时，即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了，但容器main的高度还是不能撑开。
div+css高度自适应网页布局，子div含float，父div高度自适应，已经通过测试的浏览器：ie6、ie7、ie8、火狐、Chrome。 代码来源： http://www.positioniseverything.net/articles/onetruelayout/equalheight
### div+css高度自适应详解 #### 一、引言 在前端开发中，随着屏幕尺寸的多样化以及响应式设计的需求日益增长，实现元素的高度自适应成为了一个重要的课题。高度自适应不仅能够确保页面在不同设备上的良好展示，还...
“自适应高度”是指网页元素（如div、iframe或任何其他容器）能够根据其内容或周围环境动态调整自身高度，确保内容不会被截断或溢出。在传统的网页设计中，这可能需要复杂的CSS和JavaScript来实现。而这个自适应高度...
"button自适应高度和自动换行"这个主题主要关注如何让按钮在不同屏幕尺寸和内容长度下保持良好的视觉效果。以下是对这个主题的详细解释： 一、自适应高度 1. CSS Flexbox：使用Flexbox布局模型可以轻松实现按钮的...
### iframe自适应高度(兼容多种浏览器) 在网页开发过程中，`iframe`是一种常用的元素，用于在当前页面中嵌入另一个HTML文档。然而，默认情况下，`iframe`的高度是固定的，这可能会导致内容显示不完全或者出现不必要...
如果图片的高度始终没有超出<div>的高度，那么即使设置了overflow:auto，<div>也不会有滚动条，也就无法显示其自适应高度的效果。 2. 使用CSS的Flexbox布局： Flexbox布局是一种更为先进和灵活的布局方式，它能更...
然而，仅使用CSS无法处理图片高度自适应，因为图片原始比例可能与div比例不一致。这时，我们需要借助JavaScript来动态调整图片高度。以下是一个简单的JavaScript解决方案： ```javascript window.onload = function...