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

コンテナの高さが固定されている場合はそうです。そうでない場合は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 に答える
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

わかりました。他のポスターがなぜその長さになるのかよくわかりませんparent->child。dom要素が自動的に持つ関係の利点を利用する必要があります。

.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 に答える