Re: [問題] 父div的高度只包含了一個子div
整個重點就在一個地方,就是最外面容器的高度。
以IE7以前版本來說,height是會自動視需求加高的,
但在其他合乎規範的瀏覽器來說,
高度是會依照所下的值固定,必須用auto高度才可以自動增加。
height: auto;
這樣的話IE6以外的瀏覽器應該就是正常的。
而我們常常遇到的情況是,容器會希望有最小高度,
等到高度不夠自動增加,所以就再加上min-height:
height: auto;
min-height: 300px;
這時候又會遇到一個問題是,IE6並不支援min-height,IE6的height就等同於min-height,
所以如果要讓IE7、FF、IE6看起來都正確的話,
這邊可以在最外面容器的部份使用!important來處理:
height: auto !important; // 這是給IE6以外的瀏覽器看的
height: 300px; // 這是給IE6看的,
IE6的height同時也等於min-height
min-height: 300px; // 設定其他瀏覽器顯示時的最小高度
所以整個文件大致如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.\
org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="" rel="nofollow">http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
<!--
#A {
width: 500px;
padding: 20px;
background-color: #999;
height: auto !important;
height: 300px;
min-height: 300px;
}
#B {
background-color: #666;
height: 100px;
}
#C {
background-color: #000;
height: 500px;
}
-->
</style>
</head>
<body>
<div id="A">
<div id="B">
</div>
<div id="C">
</div>
</div>
</body>
</html>
我個人是都這樣處理,提供給你參考。
--
某T:我喜歡妳>/////<
:You gotta try harder...╮(╯_╰)╭
某T:啥?試著硬一點>///<(羞)
:是叫你再努力一點啦<(# ̄皿 ̄)╮☆(__ __||)
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 59.124.63.2
※ 編輯: terrylchen 來自: 59.124.63.2 (12/22 14:45)
推
12/22 14:52, , 1F
12/22 14:52, 1F
→
12/22 15:46, , 2F
12/22 15:46, 2F
推
12/22 20:43, , 3F
12/22 20:43, 3F
→
12/22 23:12, , 4F
12/22 23:12, 4F
推
12/22 23:26, , 5F
12/22 23:26, 5F
推
12/23 00:52, , 6F
12/23 00:52, 6F
→
12/23 00:53, , 7F
12/23 00:53, 7F
→
12/23 00:54, , 8F
12/23 00:54, 8F
推
12/23 00:57, , 9F
12/23 00:57, 9F
→
12/23 00:58, , 10F
12/23 00:58, 10F
→
12/23 00:59, , 11F
12/23 00:59, 11F
→
12/23 00:59, , 12F
12/23 00:59, 12F
→
12/23 01:01, , 13F
12/23 01:01, 13F
推
12/23 01:11, , 14F
12/23 01:11, 14F
推
12/23 01:34, , 15F
12/23 01:34, 15F
→
12/23 02:04, , 16F
12/23 02:04, 16F
※ 編輯: terrylchen 來自: 59.115.162.241 (12/23 02:20)
→
12/23 02:28, , 17F
12/23 02:28, 17F
→
12/23 02:29, , 18F
12/23 02:29, 18F
→
12/23 02:29, , 19F
12/23 02:29, 19F
推
12/23 02:32, , 20F
12/23 02:32, 20F
→
12/23 02:34, , 21F
12/23 02:34, 21F
→
12/23 04:53, , 22F
12/23 04:53, 22F
→
12/23 11:25, , 23F
12/23 11:25, 23F
→
12/23 15:13, , 24F
12/23 15:13, 24F
→
12/23 15:14, , 25F
12/23 15:14, 25F
討論串 (同標題文章)
完整討論串 (本文為第 3 之 3 篇):