偶数サイズのサイドバー\ページを作る

Question

私は2つの簡単なサイドバー、1つは左側に、もう1つは右側にあるページを作っています。問題は、サイドバーのコンテンツに応じて高さを持っている、同じページです。したがって、ページのコンテンツがサイドバーのコンテンツよりも短い場合は、1つの長方形\ squareは表示されませんが、ページよりも長いサイドバーの矩形が表示されます。一方、ページの内容がサイドバーよりも長い場合は、長方形を拡張し、サイドバーの空白を「拡張」しますが、その空白はページのものでありサイドバーのものではありません。

<div id="page"> 
    <div id="sidebar1"> 
    </div> 
    <div id="sidebar2"> 
    </div> 
    <div id="pageContent"> 
    </div> 
</div> 

Answer 1

使用display:inline-block;とWidth働いていない Demo Here

#sidebar1{ 
 
    display:inline-block; 
 
    width:24%; 
 
    background:red; 
 
    height: 300px; 
 
} 
 

 
#sidebar2{ 
 
    display:inline-block; 
 
    width:24%; 
 
    background:blue; 
 
    height: 300px; 
 
} 
 

 
#pageContent{ 
 
    display:inline-block; 
 
    width:50%; 
 
    background:green; 
 
    height: 300px; 
 
}

<div id="page"> 
 
    <div id="sidebar1"> 
 
    </div> 
 
    <div id="sidebar2"> 
 
    </div> 
 
    <div id="pageContent"> 
 
    </div> 
 
</div>