div与最小高度和子div具有父级的高度

本文介绍了div与最小高度和子div具有父级的高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

Div与最小高度和子div具有父级的高度。

Div with min-height and the child div have the height of parent.

是否可能只需要CSS或javascript？

Is it possible with only CSS or javascript is needed?

示例：

#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>

推荐答案

#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; }

检查此 jsfiddle/sandeep/hKttB/

EDIT 还有其他选项。如果内容增加了 main div也增加。

EDIT there are other option also . You can give min-height to your content div also if the content increase the height of the main div also increase.

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

检查此小提琴 jsfiddle/sandeep/SRJrF/2/