2

假设以下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>

我想要实现的是左列 div 和内容 div 始终具有相同的高度。有时leftcolumn div高于content div，因为内容很少，反之亦然：当内容很多时，content 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;
}

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

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

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

4

3 回答 3

2

您可以在左右面板中使用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/

于 2012-08-22T11:25:20.697 回答
1

这个解决方案有点笨拙，因为您需要一些支持标记，但它确实有效，我以前使用过它。

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>
于 2012-08-22T09:27:30.300 回答
1

您需要使用绝对定位。

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

希望这可以帮助。

于 2012-08-22T09:31:32.873 回答