div與最小高度和子div有父母的高度

只有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>

來源

2011-06-28 João Sousa

查看http://stackoverflow.com/questions/1122381 – Ben

可能是你可以給position:absolute你content div使它的高度相等它的父

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/

編輯還有其他的選擇。如果內容增加main div的高度也會增加，您也可以給min-height以content div。

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

檢查此琴http://jsfiddle.net/sandeep/SRJrF/2/

來源

2011-06-28 08:39:08 sandeep

感謝解決方案的完美工作 –

嗯，該解決方案可能工作，但內容變得更高？你用'overflow：hidden'切割它。爲什麼然後指定一個「最小高度」而不是「高度」？考慮到「最小高度」的要求意味着內容可以高於300px，並且在這種情況下應該會增長。 – DanielB

@danielB;檢查我的新小提琴 – sandeep

我想試試這個：

在這種情況下，我被迫同最低高度爲孩子的div時，有少的內容。如果內容超過，則自動溢出。

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

這就是我們在嵌套母版頁中擁有div的方式。希望同樣會適合你。

謝謝

來源

2011-06-28 08:42:22 kheya

我認爲這是不可能的。

但你可以嘗試這樣的事情。 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 關於最小高度。

來源

2011-06-28 08:55:16 rrapuya

div與最小高度和子div有父母的高度

回答

相關問題