我正在尝试使用基于 div 的布局制作一个两列页面（请不要使用表格！）。问题是，我不能让左边的 div 与右边的高度相匹配。我的右 div 通常有很多内容。
这是我的模板的配对示例来说明问题。
<div style="float:left; width: 150px; border: 1px solid;">
<ul>
<li>nav1</li>
<li>nav2</li>
<li>nav3</li>
<li>nav4</li>
</ul>
</div>
<div style="float:left; width: 250px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
....
</div>
您最简单的答案在于下一个版本的 css (3)，目前没有浏览器支持。
现在，您只能在 javascript 中计算高度并将它们设置在左侧。
如果导航是如此重要以至于以这种方式定位，请沿着顶部运行。
您还可以通过将边框移动到容器和更大的内部来做一个视觉技巧，并使其看起来大小相同。
这使它看起来一样，但事实并非如此。
<div style="border-left:solid 1px black;border-bottom:solid 1px black;">
<div style="float:left; width: 150px; border-top: 1px solid;">
<ul>
<li>nav1</li>
<li>nav2</li>
<li>nav3</li>
<li>nav4</li>
</ul>
</div>
<div style="float:left; width: 250px; border:solid 1px black;border-bottom:0;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
...
</div>
<div style="clear:both;" ></div>
</div>
它可以在 CSS 中完成！不要让别人告诉你。
最简单、最轻松的方法是使用Faux Columns方法。
但是，如果该解决方案不适合您，您将需要阅读此技术。但请注意，这是一种 CSS 黑客技术，会让你在半夜冒冷汗醒来。
它的要点是您为列的底部分配了大量的填充，以及相同大小的负边距。然后将列放在已overflow: hidden设置的容器中。或多或少的填充/边距值允许盒子继续扩展，直到它到达包装器的末尾（由内容最多的列确定），并且填充产生的任何额外空间都被切断为溢出。这没有多大意义，我知道...
<div id="wrapper">
<div id="col1">Content</div>
<div id="col2">Longer Content</div>
</div>
#wrapper {
overflow: hidden;
}
#col1, #col2 {
padding-bottom: 9999px;
margin-bottom: -9999px;
}
请务必阅读我链接到的整篇文章，其中有许多警告和其他实现问题。这不是一个漂亮的技术，但它工作得相当好。
使用 jQuery 来解决这个问题；只需在您的准备函数中调用此函数：
function setHeight(){
var height = $(document).height(); //optionally, subtract some from the height
$("#leftDiv").css("height", height + "px");
}
这是 CSS 无法做到的那些完全合理、简单的事情之一。正如 Silviu 所建议的，Faux Columns 是一种 hacky 但实用的解决方法。如果有一天有一种方式可以说，那就太好了
div.foo {
高度：$（div.blah.height）；
}
这可以通过使用背景颜色的 css 来完成
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #87ceeb;
font-size: 1.2em;
}
#container {
width:100%; /* any width including 100% will work */
color: inherit;
margin:0 auto; /* remove if 100% width */
background:#FFF;
}
#header {
width: 100%;
height: 160px;
background: #1e90ff;
}
#content {/* use for left sidebar, menu etc. */
background: #99C;
color: #000;
float: right;/* float left for right sidebar */
margin: 0 0 0 -200px; /* adjust margin if borders added */
width: 100%;
}
#content .wrapper {
background: #FFF;
margin: 0 0 0 200px;
overflow: hidden;
padding: 10px; /* optional, feel free to remove */
}
#sidebar {
background: #99C;
color: inherit;
float: left;
width: 180px;
padding: 10px;
}
.clearer {
height: 1px;
font-size: -1px;
clear: both;
}
/* content styles */
#header h1 {
padding: 0 0 0 5px;
}
#menu p {
font-size: 1em;
font-weight: bold;
padding: 5px 0 5px 5px;
}
#footer {
clear: both;
border-top: 1px solid #1e90ff;
border-bottom: 10px solid #1e90ff;
text-align: center;
font-size: 50%;
font-weight: bold;
}
#footer p {
padding: 10px 0;
}
</style>
</head>
<body>
<div id="container">
<!--header and menu content goes here -->
<div id="header">
<h1>Header Goes Here</h1>
</div>
<div id="content">
<div class="wrapper">
<!--main page content goes here -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc
vitae purus. Aenean viverra malesuada libero. </p>
</div>
</div>
<div id="sidebar">
<!--sidebar content, menu goes here -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus.</p>
</div>
<div class="clearer"></div><!--clears footer from content-->
<!--footer content goes here -->
<div id="footer">
<p>Footer Info Here</p>
</div>
</div>
</body>
</html>
@hoyhoy
如果设计师可以在 html 中完成这项工作，那么他就可以拥有这个设计。如果他是一个真正的网页设计大师，他会意识到这是媒体的限制，因为视频在杂志广告中是不可能的。
如果他想通过赋予 2 列同等重要性来模拟权重，则更改边框，使它们看起来具有相同的权重，并使边框的颜色与列的字体颜色形成对比。
但至于使物理元素具有相同的高度，此时您只能通过表格构造或设置高度来做到这一点。为了模拟它们看起来相同的大小，它们不必是相同的大小。
想想看，我从来没有在柱子上有一个底部边框。它可能只是溢出，并被切断。您可能希望底部边框来自作为列内容一部分的单独元素。
无论如何，我知道这不是一个完美的灵丹妙药解决方案。你可能只需要玩它，或者破解它的缺点。
还有一个基于 Javascript 的解决方案。如果你有 jQuery，你可以使用下面的插件。
<script type="text/javascript">
// plugin
jQuery.fn.equalHeights=function() {
var maxHeight=0;
this.each(function(){
if (this.offsetHeight>maxHeight) {maxHeight=this.offsetHeight;}
});
this.each(function(){
$(this).height(maxHeight + "px");
if (this.offsetHeight>maxHeight) {
$(this).height((maxHeight-(this.offsetHeight-maxHeight))+"px");
}
});
};
// usage
$(function() {
$('.column1, .column2, .column3').equalHeights();
});
</script>
我用它来对齐 ID 为“中心”和“右”的 2 列：
var c = $("#center");
var cp = parseInt(c.css("padding-top"), 10) + parseInt(c.css("padding-bottom"), 10) + parseInt(c.css("borderTopWidth"), 10) + parseInt(c.css("borderBottomWidth"), 10);
var r = $("#right");
var rp = parseInt(r.css("padding-top"), 10) + parseInt(r.css("padding-bottom"), 10) + parseInt(r.css("borderTopWidth"), 10) + parseInt(r.css("borderBottomWidth"), 10);
if (c.outerHeight() < r.outerHeight()) {
c.height(r.height () + rp - cp);
} else {
r.height(c.height () + cp - rp);
}
希望能帮助到你。
将左侧菜单 div与右侧内容 div 的高度相同。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
var height = $(document).height(); //optionally, subtract some from the height
$("#menu").css("height", (height) + "px");
$("#content").css("height", (height) + "px");
});
</script>
<style type="text/css">
<!--
html, body {
font-family: Arial;
font-size: 12px;
}
#header {
background-color: #F9C;
height: 200px;
width: 100%;
float: left;
position: relative;
}
#menu {
background-color: #6CF;
float: left;
min-height: 100%;
height: auto;
width: 10%;
position: relative;
}
#content {
background-color: #6f6;
float: right;
height: auto;
width: 90%;
position: relative;
}
#footer {
background-color: #996;
float: left;
height: 100px;
width: 100%;
position: relative;
}
-->
</style>
</head>
<body>
<div id="header">
i am a header
</div>
<div id="menu">
i am a menu
</div>
<div id="content">
I am an example of how to do layout with css rules and divs.
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
<p> I am an example of how to do layout with css rules and divs. </p>
</div>
<div id="footer">
footer
</div>
</body>
</html>