css高度自適應怎麼寫

CSS+DIV自適應高度佈局，底部在底部2008-04-22 10:16ttps://wenwen.sogou.com/login/redirect?url=1%2FDTD%2Fxhtml1-transitional.dtd%22%3E" target="_blank">1/DTD/xhtml1-transitional.dtd">

">

無標題文檔

#head { width:100%; text-align:center; background:#FF9400; height:100px; position:absolute; top:0;}

#head_height { height:100px;}

#middle { margin:20px;}

#foot { width:100%; text-align:center; background:#f00; height:60px; position:absolute; bottom:0;}

* html #foot { bottom:-1px;}

#foot_height { height:60px;}

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

.className{ min-height:100px;

_height:100px;

}

註釋：min-height。zhidao最小屬性的意思，當內容超出時div被撐大。

下面是兼容IE6的。IE瀏覽器當給頂DIV高度的時候且內容超出了該高度，那麼DIV被撐大，而火狐和谷歌不會（可一個給個邊框就能看出超出的效果回了）。所以直接給height IE類瀏覽器是可以的。但是火狐不行。並且min-height這個樣式IE6不認識。所以用IE6HACK即_height只有IE6認識。當超出時 也適應，沒有超出時候是這個高度。這樣即實現了瀏覽器的答兼容性有實現了效果

你可以把左右的最外的DIV的margin-bottom值，設為-9999，然後再把padding-bottom的值設為：9999，這樣，DIV就可以自由增大，而背景也不會被改動。

left 溢出時隱藏

要隨右邊高度變化的DIV 用margin-bottom:-9999px, padding-bottom:9999px

其他的不用管，

關於LEFT要不要溢出隱藏，你可以試一下，我有點忘了。

整的DIV可以溢出隱藏。

有點蒙，如果不行，可能要用到JAVASCRIPT。

1. 在編寫網頁時，如果圖片大小事先是未知的，如果圖片過大的話，會影響的網頁中其他塊的結構

使用css可以將圖片的大小調整到一個固定的值

<span>#mian img{

max-width:170px;

width:170px;

width:expression(document.body.clientWidth>170?"170px":"auto");

max-height:180px;

height:180px;

height:expression(document.body.clientWidth>180?"180px":"auto");

overflow:hidden;

}

</span>

2.html代碼中

如果圖片的大小是事先未知的，這樣設置可以使，圖像的大小固定，從而不影響網頁中其他塊的結構

<span><div id = "maim">

<!--

在mian樣式的塊中img標籤圖片的大小會被固定在170px*180px

-->

<img src="01.jpg">

</div>

</span>