HTML
<div class="div1">
</div>
CSS
.div1 {
min-height: 30px/*最小高度30像素*/
}
设置min-height后,默认最小高度为30像素。内容增加后,div高度也会容增加。
注意:ie6 不支持min-height属性。
盒子的高度 = content的高度 + padding-top(内上边距)+ padding-bottom(内下边距) + border-top(上边框边框) + border-bottom(下边框)
深入理解CSS盒子模型(The CSS Box Model)
如果了解了盒子模型(box model)的概念,了解它是如何决定某一个元素的最终尺寸的话,会有助理解一个元素如何在网页上定位的。盒子模型主要适用于块级元素。顺便提一个与此相关的概念:行内布局模型(inline layout model)——定义了行内元素是如何定位的,在行内元素格式(InlineFormatting)中有具体说明
盒子的尺寸的计算(Calculating BoxDimensions)
在CSS2.1中,块级元素只能是矩形形状的。当计算一个块级元素的整体尺寸时,需要同时把内容区域(content area)[注释1]的长宽,连同此元素的外边距,内边距,以及边框都计算在内
可以通过声明宽和高来定义一个元素的内容(content)的宽度和高度。如果没有做任何的声明,宽度和高度的默认值将是自动(auto)
对于浮动(floated)和绝对定位(absolutelypositioned)元素(包括固定定位(fixed)元素)来说, 自动状态的宽度会使generated box收缩到紧贴它内容大小。
我们知道,当我们放置一个块级元素于页面上时,并且不设置它的定位属性(relative,absolute,fixed),即position:static,或者设置了position:relative的情况下,块的宽度是延伸自动填充满它的父元素的宽度区域