-1

わかりました、これはとても一般的だと思いますが、どこにも答えが見つからないようです。基本的に、左の列が流動的で右の列が固定された2列のdivレイアウトが必要です。これらの両方の列の高さが親コンテナーの div を埋めるようにします。

現在、右の div が高さの 100% を占めておらず、何が問題なのかわかりません。

HTML div は次のとおりです。

<div id="nmv_div_twoColumnLayoutContainer">

    <div id="nmv_div_twoColumnLeftContainer">
        <div id="nmv_div_twoColumnLeft">
            <p>the left div is good height</p>
            <p>As this is the div that will typically have the most data</p>
        </div>        
    </div>    
    <div id="nmv_div_twoColumnRightContainer" class="roundedCorners">
        <div id="nmv_div_twoColumnRight">
            the right div is a menu div but is only showing part            
        </div>        
    </div>
    <div class="clearBoth"></div>
</div>

そして私の関連CSS

.roundedCorners {
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.clearBoth {
    clear: both;
}

div#nmv_div_twoColumnLayoutContainer 
{
    overflow: hidden;
}

div#nmv_div_twoColumnRightContainer 
{
    float: right;   
    margin-left: -250px;
    width: 250px;
    background-color: gold;
}

div#nmv_div_twoColumnLeftContainer 
{
    float: left;    
    width: 100%;
    background-color: red;
}

div#nmv_div_twoColumnLeft 
{
    margin: 0 260px 0 0;    
    height: 100%;
    background-color: yellow;
}

div#nmv_div_twoColumnRight 
{    
    width: 250px;
    background-color: green;     
    height: 100%;    
}
4

2 に答える 2

3

Googleで簡単に検索すると、次のリンクが表示されました。これらの方法は、あなたがやろうとしていることを行うためにかなり一般的です。

http://www.alistapart.com/articles/fauxcolumns/

http://www.vanseodesign.com/css/equal-height-columns/

http://woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/

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

コードが機能しない基本的な理由は、要素の高さが予想とは異なる方法で計算されるためです (幅とは異なります)。この記事では、その計算方法について適切に説明しています。

于 2012-07-10T23:09:16.000 に答える
0

メニューのコンテンツが静的で、同じ高さを維持できる場合min-heightは、メニューの高さにコンテンツ div を設定し、メニューを絶対に配置できます。コンテンツがメニューと重ならないように、コンテナーに適切なパディングを与えます。

.container {
    padding-right: 260px;
    position: relative;
}
.content {
    min-height: 100px;
}
.menu {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 250px;
}

http://jsfiddle.net/gilly3/Q5CRr/

于 2012-07-10T23:42:04.730 に答える