0

我有以下标记：

HTML

<div class="container">
    <div class="sidebar">
        info <br/>
        info <br/>
    </div>
    <div class="post">
        post <br/>
        post <br/>
        post <br/>
        post <br/>
    </div>
</div>

CSS

container {
    float:left;
    width:100%;
}
.sidebar {
    float:left;
    clear:both;
    background-color: #eee;
    width:150px;
}
.post {
    background-color: #ccc;
    margin-left:150px;
}

如何使用 HTML/CSS 强制侧边栏采用帖子的高度？侧边栏和帖子的高度都可以改变大小，但帖子的高度总是大于侧边栏的高度。

JSFiddle：http: //jsfiddle.net/KK4Yc/

4

4 回答 4

2

除非你用假列伪造它，否则没有 JavaScript 就无法做到这一点。如果你想使用 jQuery，它是单行的：

​$('.sidebar').height($('.post').height());​

jsFiddle 示例

于 2012-09-18T16:24:42.370 回答
0

好的，我不太确定为什么其他海报会如此长，您只需要利用parent->childdom 元素自动具有的关系的好处：

.container {
  overflow: hidden;
  border: 1px solid #ff0000;
}

.sidebar {
  background-color: #eee;
  float: left;
  clear: both;
  width: 150px;
}

.sidebar-wrapper {
  background: #eee;
  overflow: hidden;
}

.post {
  margin-left: 150px;
  background-color: #ccc;
}

以上是您需要的所有 CSS （只要您有“固定颜色”或“重复背景图像”侧边栏），以下是标记：

<div class="container">
  <div class="sidebar-wrapper">
    <div class="sidebar">
      info <br/>
      info <br/>
    </div>
    <div class="post" style="background: green;">
      post <br/>
      post <br/>
      post <br/>
      post <br/>
    </div>
  </div>
</div>

显然（从 HTML/CSS 的角度来看相当烦人）如果您没有“纯色”或“重复背景”区域，那么您将不得不使用 j08691 的 javascript 方法或 Diodeus 的固定高度容器方法（尽管 Diodeus 似乎现在已经更改了代码，并包含了 caligula 答案的一部分——我猜是偶然的？）。

于 2012-09-18T16:56:44.770 回答
0

正如j08691所说，可以通过 JS 来实现。但是您可以尝试不同的方法，例如使用纯 css 将灰色 bg-image 添加到.container，这样看起来侧边栏会延伸到底部，或者添加具有相同目的的附加元素（FIDDLE）：

.container {
    float:left;
    width:100%;
    overflow:hidden;
    position: relative;
}
#bg {
    background-color: #eee;
    width:150px;
    height: 100%;
    position: absolute; 
}
.sidebar {
    float:left;
    clear:both;
    background-color: #eee;
    width:150px;
    height: 100%;
    position:relative;
}


<div class="container">
    <div id="bg"></div>
于 2012-09-18T16:34:23.917 回答
0

如果容器具有固定高度，则可以，否则需要使用 JavaScript。

   body, html { height:100% }

    .container {
        width:100%;
        height:500px;
        border:1px solid #ff0000
    }

#bg {
    background-color: #eee;
    width:150px;
    height: 100%;
    position: absolute; 
}
.sidebar {
    float:left;
    clear:both;
    background-color: #eee;
    width:150px;
    height: 100%;
    position:relative;
}
于 2012-09-18T16:18:53.697 回答