我有一个网站，我需要主页面和右侧面板div元素的高度相同。
这是我到目前为止的标记：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body, form, html {
height: 100%;
}
html
{
font-family: helvetica, Arial,sans-serif;
font-size: 13px;
margin: 0px;
padding: 0px;
background-color: #f4f4f4;
}
.wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -140px;
}
#header
{
background: url("Images/backgrounds/headback_50x50.jpg") repeat-x scroll center top;
width: 100%;
margin-top: 0px;
height: 50px;
background-color: #474747;
}
#header .content {
width: 100%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
#header #mainMenu {
float: left;
margin-left: 50px;
margin-top: 23px;
}
#mainContent
{
background-repeat: repeat-y;
width: 1006px;
padding: 10px 20px 10px 20px;
background-color: #f4f4f4;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
}
#mainContent #page {
width: 800px;
float: left;
background-color: #ffffff;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
}
#mainContent #rightPanel {
width: 196px;
overflow: visible;
float: left;
margin-left: 10px;
height: 1000px;
}
#mainContent #rightPanel #rightCon {
background-color: #ffffff;
padding: 7px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
}
#footer
{
background: url("Images/backgrounds/footerback_300x300.jpg") repeat-x scroll center top;
width: 100%;
margin: 0px;
height: 200px;
background-color: #3d3d3d;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="header">
<div class="content">
<div id="contentBody">
<div class="mainLogo"> </div>
<div id="mainMenu">
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
</div>
<div id="mainContent">
<div id="page">
Lorem ipsum dolor sit amet, et molestie diam viverra sed proin, nec aenean. Vel donec donec, luctus donec elementum sed. Tristique arcu ut mauris quam potenti in. Mauris velit ut torquent, sagittis et, mi tellus tincidunt elit posuere. Enim aliquam quam sociosqu wisi. Dignissim blandit id. Praesent donec, pellentesque nulla.
Integer aliquam tincidunt sapien neque nec, auctor lacinia nullam lectus dolor. Vehicula litora vel lacinia, auctor ultricies, lacus orci ligula leo eros, turpis vel repellendus erat felis totam suscipit, nulla magnis justo wisi inceptos. A tortor eget quis massa vitae mauris, urna lorem auctor congue, aliquam pellentesque at, quis enim id platea ipsum et. Lectus mauris, hac sit vestibulum diam nam, massa laoreet arcu tincidunt sagittis malesuada mattis, velit in lacus augue quisque, quam eget dolor et. Nostrud nec, urna natoque, turpis a, mauris id viverra id. Sit posuere, ut placerat, ac tempus nulla consectetuer. Sit fames quam morbi proin ut, mi massa, justo erat at curae tellus dignissim non, viverra sodales egestas imperdiet molestie faucibus mauris, morbi massa enim non.
Nec massa. Libero ornare est magnis, placerat ipsum justo ut in penatibus tortor, libero rutrum incididunt vehicula, elit elit accumsan donec. Urna auctor nonummy arcu, mi vivamus enim dis eu, etiam cursus faucibus quam eu, neque ipsum, ultrices enim. Laoreet mollis vestibulum, ut lacus ante ipsum. Hymenaeos sapien ut at, non wisi ipsum magna sed et justo, nulla adipiscing quis eget et feugiat diam, justo malesuada curabitur, aliquet ac condimentum quisque justo duis tortor. Vestibulum in semper turpis scelerisque diam, egestas magna dolorum, est consequat velit consectetuer tempus, orci est. Netus amet, eos rutrum lacus, nec ad sed ipsum tortor mattis tincidunt, et eget ut auctor aliquam sollicitudin diam, ornare elit pede cursus ornare elit ante. Suspendisse suspendisse sem justo, erat dictum elementum volutpat vel urna a. Vestibulum sodales, vel ut massa sapien orci, luctus provident iaculis, lorem libero ut et in, at ante felis. Maecenas praesent in. Justo ut sollicitudin magnis vitae morbi, auctor malesuada vel vestibulum vitae, in risus elit mi, facilisi suscipit congue volutpat nisi et, pretium lacus.
Velit amet vel praesent id, elit duis bibendum pharetra phasellus eget sit, nibh consequat, justo magna vestibulum vestibulum. Vitae elit tortor adipiscing aliquam, sit elit fringilla velit tincidunt in risus, aenean sem lectus phasellus mattis volutpat quis. Sem vehicula lorem id eros nullam, at proin in. Wisi dictum imperdiet, nunc gravida nibh, pellentesque tellus aliquam diam culpa sit amet, porro pede risus volutpat faucibus ut libero, viverra donec. Fringilla mauris duis mauris turpis nam. Ante pellentesque, fusce lacus vitae lacus tincidunt, laoreet eget, vel faucibus amet vel. Eleifend cras et fermentum pharetra, justo porta, sapien amet nullam habitant dolor curabitur et, id eu sit. Vitae at, in et. Convallis rutrum.
Lorem ipsum dolor sit amet, et molestie diam viverra sed proin, nec aenean. Vel donec donec, luctus donec elementum sed. Tristique arcu ut mauris quam potenti in. Mauris velit ut torquent, sagittis et, mi tellus tincidunt elit posuere. Enim aliquam quam sociosqu wisi. Dignissim blandit id. Praesent donec, pellentesque nulla.
Integer aliquam tincidunt sapien neque nec, auctor lacinia nullam lectus dolor. Vehicula litora vel lacinia, auctor ultricies, lacus orci ligula leo eros, turpis vel repellendus erat felis totam suscipit, nulla magnis justo wisi inceptos. A tortor eget quis massa vitae mauris, urna lorem auctor congue, aliquam pellentesque at, quis enim id platea ipsum et. Lectus mauris, hac sit vestibulum diam nam, massa laoreet arcu tincidunt sagittis malesuada mattis, velit in lacus augue quisque, quam eget dolor et. Nostrud nec, urna natoque, turpis a, mauris id viverra id. Sit posuere, ut placerat, ac tempus nulla consectetuer. Sit fames quam morbi proin ut, mi massa, justo erat at curae tellus dignissim non, viverra sodales egestas imperdiet molestie faucibus mauris, morbi massa enim non.
Nec massa. Libero ornare est magnis, placerat ipsum justo ut in penatibus tortor, libero rutrum incididunt vehicula, elit elit accumsan donec. Urna auctor nonummy arcu, mi vivamus enim dis eu, etiam cursus faucibus quam eu, neque ipsum, ultrices enim. Laoreet mollis vestibulum, ut lacus ante ipsum. Hymenaeos sapien ut at, non wisi ipsum magna sed et justo, nulla adipiscing quis eget et feugiat diam, justo malesuada curabitur, aliquet ac condimentum quisque justo duis tortor. Vestibulum in semper turpis scelerisque diam, egestas magna dolorum, est consequat velit consectetuer tempus, orci est. Netus amet, eos rutrum lacus, nec ad sed ipsum tortor mattis tincidunt, et eget ut auctor aliquam sollicitudin diam, ornare elit pede cursus ornare elit ante. Suspendisse suspendisse sem justo, erat dictum elementum volutpat vel urna a. Vestibulum sodales, vel ut massa sapien orci, luctus provident iaculis, lorem libero ut et in, at ante felis. Maecenas praesent in. Justo ut sollicitudin magnis vitae morbi, auctor malesuada vel vestibulum vitae, in risus elit mi, facilisi suscipit congue volutpat nisi et, pretium lacus.
Velit amet vel praesent id, elit duis bibendum pharetra phasellus eget sit, nibh consequat, justo magna vestibulum vestibulum. Vitae elit tortor adipiscing aliquam, sit elit fringilla velit tincidunt in risus, aenean sem lectus phasellus mattis volutpat quis. Sem vehicula lorem id eros nullam, at proin in. Wisi dictum imperdiet, nunc gravida nibh, pellentesque tellus aliquam diam culpa sit amet, porro pede risus volutpat faucibus ut libero, viverra donec. Fringilla mauris duis mauris turpis nam. Ante pellentesque, fusce lacus vitae lacus tincidunt, laoreet eget, vel faucibus amet vel. Eleifend cras et fermentum pharetra, justo porta, sapien amet nullam habitant dolor curabitur et, id eu sit. Vitae at, in et. Convallis rutrum.
Lorem ipsum dolor sit amet, et molestie diam viverra sed proin, nec aenean. Vel donec donec, luctus donec elementum sed. Tristique arcu ut mauris quam potenti in. Mauris velit ut torquent, sagittis et, mi tellus tincidunt elit posuere. Enim aliquam quam sociosqu wisi. Dignissim blandit id. Praesent donec, pellentesque nulla.
Integer aliquam tincidunt sapien neque nec, auctor lacinia nullam lectus dolor. Vehicula litora vel lacinia, auctor ultricies, lacus orci ligula leo eros, turpis vel repellendus erat felis totam suscipit, nulla magnis justo wisi inceptos. A tortor eget quis massa vitae mauris, urna lorem auctor congue, aliquam pellentesque at, quis enim id platea ipsum et. Lectus mauris, hac sit vestibulum diam nam, massa laoreet arcu tincidunt sagittis malesuada mattis, velit in lacus augue quisque, quam eget dolor et. Nostrud nec, urna natoque, turpis a, mauris id viverra id. Sit posuere, ut placerat, ac tempus nulla consectetuer. Sit fames quam morbi proin ut, mi massa, justo erat at curae tellus dignissim non, viverra sodales egestas imperdiet molestie faucibus mauris, morbi massa enim non.
Nec massa. Libero ornare est magnis, placerat ipsum justo ut in penatibus tortor, libero rutrum incididunt vehicula, elit elit accumsan donec. Urna auctor nonummy arcu, mi vivamus enim dis eu, etiam cursus faucibus quam eu, neque ipsum, ultrices enim. Laoreet mollis vestibulum, ut lacus ante ipsum. Hymenaeos sapien ut at, non wisi ipsum magna sed et justo, nulla adipiscing quis eget et feugiat diam, justo malesuada curabitur, aliquet ac condimentum quisque justo duis tortor. Vestibulum in semper turpis scelerisque diam, egestas magna dolorum, est consequat velit consectetuer tempus, orci est. Netus amet, eos rutrum lacus, nec ad sed ipsum tortor mattis tincidunt, et eget ut auctor aliquam sollicitudin diam, ornare elit pede cursus ornare elit ante. Suspendisse suspendisse sem justo, erat dictum elementum volutpat vel urna a. Vestibulum sodales, vel ut massa sapien orci, luctus provident iaculis, lorem libero ut et in, at ante felis. Maecenas praesent in. Justo ut sollicitudin magnis vitae morbi, auctor malesuada vel vestibulum vitae, in risus elit mi, facilisi suscipit congue volutpat nisi et, pretium lacus.
Velit amet vel praesent id, elit duis bibendum pharetra phasellus eget sit, nibh consequat, justo magna vestibulum vestibulum. Vitae elit tortor adipiscing aliquam, sit elit fringilla velit tincidunt in risus, aenean sem lectus phasellus mattis volutpat quis. Sem vehicula lorem id eros nullam, at proin in. Wisi dictum imperdiet, nunc gravida nibh, pellentesque tellus aliquam diam culpa sit amet, porro pede risus volutpat faucibus ut libero, viverra donec. Fringilla mauris duis mauris turpis nam. Ante pellentesque, fusce lacus vitae lacus tincidunt, laoreet eget, vel faucibus amet vel. Eleifend cras et fermentum pharetra, justo porta, sapien amet nullam habitant dolor curabitur et, id eu sit. Vitae at, in et. Convallis rutrum.
Lorem ipsum dolor sit amet, et molestie diam viverra sed proin, nec aenean. Vel donec donec, luctus donec elementum sed. Tristique arcu ut mauris quam potenti in. Mauris velit ut torquent, sagittis et, mi tellus tincidunt elit posuere. Enim aliquam quam sociosqu wisi. Dignissim blandit id. Praesent donec, pellentesque nulla.
Integer aliquam tincidunt sapien neque nec, auctor lacinia nullam lectus dolor. Vehicula litora vel lacinia, auctor ultricies, lacus orci ligula leo eros, turpis vel repellendus erat felis totam suscipit, nulla magnis justo wisi inceptos. A tortor eget quis massa vitae mauris, urna lorem auctor congue, aliquam pellentesque at, quis enim id platea ipsum et. Lectus mauris, hac sit vestibulum diam nam, massa laoreet arcu tincidunt sagittis malesuada mattis, velit in lacus augue quisque, quam eget dolor et. Nostrud nec, urna natoque, turpis a, mauris id viverra id. Sit posuere, ut placerat, ac tempus nulla consectetuer. Sit fames quam morbi proin ut, mi massa, justo erat at curae tellus dignissim non, viverra sodales egestas imperdiet molestie faucibus mauris, morbi massa enim non.
Nec massa. Libero ornare est magnis, placerat ipsum justo ut in penatibus tortor, libero rutrum incididunt vehicula, elit elit accumsan donec. Urna auctor nonummy arcu, mi vivamus enim dis eu, etiam cursus faucibus quam eu, neque ipsum, ultrices enim. Laoreet mollis vestibulum, ut lacus ante ipsum. Hymenaeos sapien ut at, non wisi ipsum magna sed et justo, nulla adipiscing quis eget et feugiat diam, justo malesuada curabitur, aliquet ac condimentum quisque justo duis tortor. Vestibulum in semper turpis scelerisque diam, egestas magna dolorum, est consequat velit consectetuer tempus, orci est. Netus amet, eos rutrum lacus, nec ad sed ipsum tortor mattis tincidunt, et eget ut auctor aliquam sollicitudin diam, ornare elit pede cursus ornare elit ante. Suspendisse suspendisse sem justo, erat dictum elementum volutpat vel urna a. Vestibulum sodales, vel ut massa sapien orci, luctus provident iaculis, lorem libero ut et in, at ante felis. Maecenas praesent in. Justo ut sollicitudin magnis vitae morbi, auctor malesuada vel vestibulum vitae, in risus elit mi, facilisi suscipit congue volutpat nisi et, pretium lacus.
Velit amet vel praesent id, elit duis bibendum pharetra phasellus eget sit, nibh consequat, justo magna vestibulum vestibulum. Vitae elit tortor adipiscing aliquam, sit elit fringilla velit tincidunt in risus, aenean sem lectus phasellus mattis volutpat quis. Sem vehicula lorem id eros nullam, at proin in. Wisi dictum imperdiet, nunc gravida nibh, pellentesque tellus aliquam diam culpa sit amet, porro pede risus volutpat faucibus ut libero, viverra donec. Fringilla mauris duis mauris turpis nam. Ante pellentesque, fusce lacus vitae lacus tincidunt, laoreet eget, vel faucibus amet vel. Eleifend cras et fermentum pharetra, justo porta, sapien amet nullam habitant dolor curabitur et, id eu sit. Vitae at, in et. Convallis rutrum.
</div>
<div id="rightPanel">
<div id="rightCon">
Right Panel
</div>
</div>
<div style="clear:both;"></div>
</div>
<div class="push"></div>
</div>
<div id="footer">
<div class="content">
Footer
</div>
</div>
</body>
答案 0 :(得分：0)
使用负边距设置高度相等的div;
<强> CSS
#container {
width:960px;
margin: 0 auto;
}
#content {
float:left;
width:700px;
border-left: 260px solid #555;
}
#sidebar {
float: left;
width:260px;
margin-right: -260px;
position: relative;
}
<强> HTML
<div id="container">
<div id="sidebar">
<p>Sidebar</p>
</div>
<div id="content">
<p>Main content</p>
</div>
</div>
这是实现相同高度列效果的真正有效方法。您还可以查看其他一些方法来实现这一目标，这可能更适合您的需求。
http://www.vanseodesign.com/css/equal-height-columns/
我确信在你给出的代码中实现它应该不是一项艰巨的任务，所以我会把它留给你。
祝你的网站好运！
答案 1 :(得分：0)
display: table-cell是解决此类问题的简单而可靠的解决方案。例如：http://jsfiddle.net/26MGE/
答案 2 :(得分：0)