divがmin-height、子divが親の高さを持つ

Question

最小高さのDivと子divの高さがparentです。

CSSまたはJavaScriptのみが必要ですか？

例：

#main { 
    min-height: 300px; 
    width: 100%; 
} 

#menu, #content { 
    float: left; 
    width: 50%; 
} 

#menu { 
    height: 150px; 
    background-color: red; 
} 

#content { 
    height: 100%; 
    background-color: green; 
} 


<div id="main"> 
      <div id="menu">menu</div> 
      <div id="content">content</div> 
<div> 

Answer 1

あなたはそれが親

年代のそれは同じ高さだ作るためにあなたの content divに position:absoluteを与えることができるかもしれ

CSS：

#main { 
    min-height: 300px; 
    width: 100%; 
    position:relative; 
    background-color: yellow; 
} 

#menu, #content { 
    float: left; 
    width: 50%; 
    overflow:hidden; 
} 

#menu { 
    height: 150px; 
    background-color: red; 
} 
#content { 
    height: 100%; 
    background-color: green; 
    position:absolute; 
    top:0; 
    right:0; 
} 

チェックこのhttp://jsfiddle.net/sandeep/hKttB/

EDIT 他にもオプションがあります。内容が高い場合は、main divの増加もまたをcontent divに与えることができます。私はこれをしようと

#content { 
    height: 100%; 
    min-height:300px; 
    background-color: green; 
} 

チェックこのフィドルhttp://jsfiddle.net/sandeep/SRJrF/2/

Answer 2

：少ないコンテンツがある場合に

この場合は、私が子供のdivに同じ分の高さを余儀なくされました。 コンテンツが超過すると、自動オーバーフローが発生します。

#content { 
    min-height: 300px; 
    overflow:auto; 
    background-color: green; 
} 

これは、ネストされたマスターページにコンテンツdivがある方法です。 同じことがうまくいくと思います。

ありがとうございました

Answer 3

私はそれが不可能だと思います。

でも、このようなことを試すことができます。 jsFiddle

#main { 
    width: 100%; 
    height:300px; 
    min-height:300px; 
} 

#menu, 
#content{ 
    float: left; 
    display:inline; 
    width: 50%; 
    position:relative; 
} 

#menu { 
    height: 150px; 
    background-color: red; 
} 

#content { 
    height: 100%; 
    background-color: green; 
} 

も最小の高さについて、このmin-height をお読みください。