Question

假设以下html页面：

<html>
 <head></head>
 <body>
  <div id="wrapper">
   <div id="header"/>
   <div id="navigation"/>
   <div id="leftcolumn"/>
   <div id="content/>
   <div id="footer"/>
  </div>
 </body>
</html>

我想要实现的是，leftcolumn div和content div总是具有相同的高度。有时，leftcolumn div高于content div，因为内容很少，反之亦然：当内容很多时，内容div高于leftcolumn div。

现在的情况产生了一些布局恶作剧，因为身体背景，左栏背景和内容背景都是不同的颜色。

这是我原来的CSS：

* {
    padding: 0;
    margin: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #FFFEE9;
}

#wrapper {
    margin: 0 auto;
    width: 900px;
    height: auto;
}

#content {
    float: left;
    color: #006350;
    background: #DEE3DC;
    height: 100%;
    display: inline;
    width: 730px;
}

#contents {
    margin: 35px;
}

#contents h1, h2 {
    padding-bottom: 15px;
}

#contents p {
    padding-top: 5px;
    padding-bottom: 5px;
}

#header {
    color: black;
    width: 900px;
    float: left;
    height: 160px;
    background: #FFFEE9;
    margin-top: 10px;
}

#navigation p {
    padding: 3px;
}

#footer {
    width: 900px;
    height: 40px;
    clear: both;
    color: white;
    background: #83422D;
    font-size: 80%;
}

#footer a {
    color: white;
    text-decoration: none;
}

#footer p {
    padding: 4px;
}

#navigation {
    float: left;
    width: 900px;
    height: 25px;
    color: white;
    background: #83422D;
}

#navigation a {
    text-decoration: none;
    color: white;
}

#navigation a:hover {
    text-decoration: underline;
}

#leftcolumn {
    color: white;
    background: #006350;
    height: 100%;
    width: 170px;
    float: left;
}

#leftcolumn a {
    text-decoration: none;
    color: white;
}

#leftcolumn a:hover {
    text-decoration: underline;
}

#leftcolumn li {
    padding-bottom: 10px;
}

#leftcolumn ul {
    margin-left: 20px;
    margin-top: 20px;
    list-style: none;
}

.centered {
    text-align: center;
    margin: auto;
    display: block;
}

#gallery {
    height: 300px;
    width: 650px;
}

#gallery img {
    margin-right: 50px;
    margin-top: 50px;
}

#gallerytext {
    width: 400px;
    font-size: 75%;
    color: black;
    position: relative;
    margin-left: 155px;
    margin-top: -100px;
    text-align: justify;
}

我尝试在不同的div（包装器，左栏和内容）上使用height: 100%, height:inherit, height:auto,...等CSS样式的组合，但我似乎无法得到我想要的结果。结论：如果我希望leftcolumn和content div具有相同的高度，那么我应该使用哪些CSS样式，而不管当时哪一个更高。（并且不使用javascript）。

左侧列较大的JsFiddle示例：http://jsfiddle.net/CQPnF/4/

内容较大的示例：http://jsfiddle.net/BQkme/

Answer 1

您可以在左侧和右侧面板中使用display:table-cell而不是float来获得所需的结果： -

我已从您的#content & #leftcolummn中移除了浮动广告，并根据您的要求为其display:table-cell;提供了正常工作。

更新CSS

* {
    padding: 0;
    margin: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #FFFEE9;
}

#wrapper {
    margin: 0 auto;
    width: 900px;
    overflow:hidden;
}

#content {
    color: #006350;
    background: #DEE3DC;
    display:table-cell;
    width: 730px;
}

#contents {
    margin: 35px;
}

#contents h1, h2 {
    padding-bottom: 15px;
}

#contents p {
    padding-top: 5px;
    padding-bottom: 5px;
}

#header {
    color: black;
    width: 900px;
    float: left;
    height: 160px;
    background: #FFFEE9;
    margin-top: 10px;
}

#navigation p {
    padding: 3px;
}

#footer {
    width: 900px;
    height: 40px;
    clear: both;
    color: white;
    background: #83422D;
    font-size: 80%;
}

#footer a {
    color: white;
    text-decoration: none;
}

#footer p {
    padding: 4px;
}

#navigation {
    float: left;
    width: 900px;
    height: 25px;
    color: white;
    background: #83422D;
}

#navigation a {
    text-decoration: none;
    color: white;
}

#navigation a:hover {
    text-decoration: underline;
}

#container {
    border:1px solid red;
    overflow:hidden;

}

#leftcolumn {
    color: white;
    background: #006350;
    width: 170px;
    display:table-cell;
}

#leftcolumn a {
    text-decoration: none;
    color: white;
}

#leftcolumn a:hover {
    text-decoration: underline;
}

#leftcolumn li {
    padding-bottom: 10px;
}

#leftcolumn ul {
    margin-left: 20px;
    margin-top: 20px;
    list-style: none;
}

.centered {
    text-align: center;
    margin: auto;
    display: block;
}

#gallery {
    height: 300px;
    width: 650px;
}

#gallery img {
    margin-right: 50px;
    margin-top: 50px;
}

#gallerytext {
    width: 400px;
    font-size: 75%;
    color: black;
    position: relative;
    margin-left: 155px;
    margin-top: -100px;
    text-align: justify;
}

请参阅演示： - http://jsfiddle.net/BQkme/10/

Answer 2

这个解决方案是一个很小的hacky，因为你需要一些支持标记，但它确实有效，我之前使用过它。

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

我遇到的主要问题是你必须将你的内容div嵌套到一个等于列数的深度。在你的情况下，这不是一个大问题，因为你只是将你的内容嵌套在2个容器div中。

您的标记最终可能会显示如下内容：

<html>
 <head></head>
 <body>
  <div id="wrapper">
   <div id="header"/>
   <div id="navigation"/>
   <div id="container_content">
     <div id="container_leftcolumn">
       <div id="leftcolumn"/>
       <div id="content/>
     </div>
   </div>
   <div id="footer"/>
  </div>
 </body>
</html>

Answer 3

您需要使用绝对定位。

Here 是一个有效的现场演示。

希望这有帮助。

侧栏和内容的div高度相同

3 个答案: