<div id="left"> news feed goes here </div> <div id="right"> another news feed ges here </div> <div"> <div id="left"> news feed goes here </div> <div id="right"> another news feed ges here </div> <div"> <div id="left"> news feed goes here </div> <div id="right"> another news feed ges here </div> <div" />

divの高さを「メイン」コンテナの100%のままにするにはどうすればよいですか?

<div id="main">
    <div id="left">
        news feed goes here
    </div>
    <div id="right">
        another news feed ges here
    </div>
    <div style="clear:both;"></div>
</div>

私がコンテナ「main」を持っていて、2つの列があるとします。どちらの列も float:left; です。

人々が左のニュースフィードの列で「もっと読み込み」をクリックすると、もちろん、より多くのコンテンツを読み込むため、その列の高さが拡大されます。しかし、私は右列も展開して欲しいと思っています。つまり、 "right"列を常にmainの100%の高さにします。

どうやってやるの? 「正しい」列の高さを100%としますか?または何?

1
これを行うにはさまざまな方法がありますが、質問はCSSと同じくらい古いものです。 stackoverflow.com/search?q=equal+height+column からの返品をご覧ください。
追加された 著者 ScottS,

2 答え

divの高さを変更したいという場合は、

document.getElementById("yourRightDivsId").style.height = yourNewHeight;
0
追加された

重複しているかどうかはわかりません。

http://jsfiddle.net/pixelass/uAur5/

HTML

load more
<div class="main">
    <div class="left">this is a left box</div>
    <div class="full">this is the right box</div>

</div>

CSS

.left {
    background:#666;
    margin:10px;
    width:130px;
    height:80px;
    float:left;
    padding:10px;
}
.full {
    width:130px;
    background:#eee;
    float:right;
    height:80px;
    padding:10px;
    margin:10px;
}
.main {
    width:500px;
    background:#000;
    height:140px;
    margin:20px 10px;
}
.more{
border:#000 1px solid;
    padding:3px;
    background:#222;
    color:#aaa;
    margin:20px;
    cursor:pointer;
}

jQuery

$('.more').click(function(){
   $('.main').append('<div class="left">this is a left box</div>');
   $('.full').CSS('height', '+=120px'); 
   $('.main').CSS('height', '+=120px'); 
});
0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript