CSS宽高相关

一.自适应高度

用这个好用

div {
     width:200px;
     height:auto!important;
     height:200px;
     min-height:200px;
     border:1px solid green;
    }

-----------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div自动高度</title>
<style type="text/css">

</style>
</head>
<body>
<h4>利用clear自动高度，因为TOP层有下边界</h4>
<div class="con line">
<div class="top line"></div>
<div class="top line"></div>
<div class="top line"></div>
<div class="top line"></div>
<div class="top line"></div>
<div class="top line"></div>
<div class="cl"></div>
</div>
<h4>利用overflow和高度的自动高度实现，无下边界的情况</h4>
<div class="con1 line">
<div class="top1 line"></div>
<div class="top1 line"></div>
<div class="top1 line"></div>
<div class="top1 line"></div>
<div class="top1 line"></div>
<div class="top1 line"></div>
</div>
</body>
</html>

二、给行内元素定义宽度

　　如果你给一个行内元素定义宽度,那么它只是在IE6下有效. 所有的HTML元素要么是行内元素要么就好是块元素. 行内元素包括: <span>, <a>, <strong> 和 <em>. 块元素包括<div>, <p>, <h1>, <form>和<li> . 你不能定义行内元素的宽度, 为了解决这个问题你可以将行内元素转变为块元素.

Html代码

span { width: 150px; display: block }

　　为了让他在IE6下工作, 我们需要一些额外的工作. 开始的时候我们需要创建两个div, 一个包含另一个:

Java代码

<div class="container">
<div class="holder">Content</div>
</div>

<div class="container"><div class="holder">Content</div></div>

　　然后你需要定义外层div的min-width属性，

Html代码

.container {
min-width:300px;
}

.container {min-width:300px;}

这时该是IE hack大显身手的时候了. 你需要包含如下的代码:

Html代码

* html .container {
border-right: 300px solid #FFF;
}
* html .holder {
display: inline-block;
position: relative;
margin-right: -300px;
}

* html .container {border-right: 300px solid #FFF;}* html .holder {display: inline-block;position: relative;margin-right: -300px;}

三、让固定宽度的页面居中

　　为了让页面在浏览器居中显示, 需要相对定位外层div, 然后把margin设置为auto.

Html代码

#wrapper {
margin: auto;
position: relative;
}

四、最小宽度

　　IE6另外一个bug就是它不支持 min-width 属性. min-width又是相当有用的, 特别是对于弹性模板来说, 它们有一个100%的宽度,min-width 可以告诉浏览器何时就不要再压缩宽度了.

除IE6以外所有的浏览器你只需要一个 min-width: Xpx; 例如:

Html代码

.container {
min-width:300px;
}

.container {min-width:300px;}

　　为了让他在IE6下工作, 我们需要一些额外的工作. 开始的时候我们需要创建两个div, 一个包含另一个:

Java代码

<div class="container">
<div class="holder">Content</div>
</div>

<div class="container"><div class="holder">Content</div></div>

　　然后你需要定义外层div的min-width属性，

Html代码

.container {
min-width:300px;
}

.container {min-width:300px;}

这时该是IE hack大显身手的时候了. 你需要包含如下的代码:

Html代码

* html .container {
border-right: 300px solid #FFF;
}
* html .holder {
display: inline-block;
position: relative;
margin-right: -300px;
}

五。最小高度然后自适合

#mrjin {
    background:#ccc;
    min-height:100px;
    height:auto !important;
    height:100px;
    overflow:visible;
}

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。