MozTW 討論區
https://forum.moztw.org/

表頭固定及100%高的問題
https://forum.moztw.org/viewtopic.php?f=13&t=13456		 第 1 頁 (共 1 頁)
發表人:  vtsuper [ 2006-03-31, 11:21 ]
文章主題 :  表頭固定及100%高的問題
在Firefox中,這段code在FF中執行一切正常,表頭可以固定而其餘部份則100%高
(參考file 1)

但為什麼當record填加時,又突然不再是100%高,scroll bar也被蓋著呢?
(參考file 2)

附加檔案:
file2.txt [12.35 KiB]
被下載 452 次
file1.txt [1.83 KiB]
被下載 382 次
發表人:  不惑仔Boohover [ 2006-03-31, 12:25 ]
文章主題 : 
vtsuper 寫:
在Firefox中,這段code在FF中執行一切正常,表頭可以固定而其餘部份則100%高
(參考file 1)

但為什麼當record填加時,又突然不再是100%高,scroll bar也被蓋著呢?
(參考file 2)


不是很懂意思耶，到底file1(test0)是對的，還是file2(test)是對的?而且兩個檔案的語法結構大不相同，如何比較?而你提到加record，是加什麼record?在那裡加?
發表人:  vtsuper [ 2006-03-31, 13:53 ]
文章主題 : 
對不起,原來上載了錯的檔案..
現已更新了..

請注意file2.txt,右下方的scrollbar的箭咀應該會明白我指的是什麼了...感激..
發表人:  不惑仔Boohover [ 2006-03-31, 18:19 ]
文章主題 : 
在firefox裡要達成固定標頭的目的不用這麼麻煩，利用
position:fixed;(ie不支援)
的特性就很容易可以達成了，根本不需要如此大費周章。建議你不要在這上面浪費時間，如果也想要在firefox上正確顯示，還是另做一個正確的css設計給firefox。

另外，因為每個物件height都是100%，實際上是錯誤的邏輯，因為內容都已經都已經超過視窗的高度了，而且還有上面佔去兩排標頭，100%就會再加上這些物件的高度，而因為body overflow:hidden;超出部份就看不見了。ie經常會判斷設計者的可能錯誤，而自動產生莫名其妙的修正，切勿認為在ie上看到的，就一定是正確的。
發表人:  vtsuper [ 2006-04-03, 18:54 ]
文章主題 : 
小弟習慣了IE的表達方式...所以有些地方還是想不通

以一個1024*768的resolution為例
我想建立一個div,有5px padding,3px margin,1px border
而想這個div的border貼著browser的邊..(不論browser有否被resize,div也會隨browser大小縮放)

在IE裡的css我會這樣寫
body {
padding:0;
margin:0;
}

div {
padding:5px;
margin:3px;
border:1px;
width:100%;
height:100%;
}

但在Firefox裡我覺得很難實現...因為width:100%是不包括margin,padding,border.....

所以這個情況應如何處理呢???
發表人:  wini [ 2006-04-03, 20:14 ]
文章主題 : 
用 CSS hack ，讓 IE 等的 CSS 支援不齊的瀏覽器，
可以跑出跟 Fx 等支援 CSS 2 完善的瀏覽器不同的結果就好。

在正確的 CSS 支援情況下，
width 不包含 margin padding border ，
不過基本上有了 margin 的話，也不一定要 width 跟 height 。

CSS hack 的手法如下
引言回覆:
/* for IE 6 or lower */
selector { property : value }
/* for Firefox or Opera or Safari... */
* > selector { property : value }


總之重點就在於「 * > selector 」，
這個一定要放在後面的地方，
否則同樣規則的「 selector 」放它後面時會蓋掉它。
發表人:  不惑仔Boohover [ 2006-04-03, 23:14 ]
文章主題 : 
vtsuper 寫:
在IE裡的css我會這樣寫
body {
padding:0;
margin:0;
}

div {
padding:5px;
margin:3px;
border:1px;
width:100%;
height:100%;
}


你這樣寫，ie也不會實現到視窗的100%高度呀。正確的使用如下：
代碼:
html>body div {
   position: fixed;
   padding: 5px;
   border: 1px solid;
   top: 3px;
   right: 3px;
   bottom: 3px;
   left: 3px;
}


如果只是要產生符合視窗寬度而已，那就很容易，如下：
代碼:
body {
   margin: 0;
   padding: 3px;
}
div {
   padding: 5px;
   border: 1px solid;
}
發表人:  vtsuper [ 2006-04-04, 10:35 ]
文章主題 : 
請問
1. IE.txt那個還是不能在IE正常顯示呢,是不是我做錯了什麼?

2. FF.txt只能成功顯示於FF,有沒有方法可以同時兼容於IE及FF而不是分開兩個.css file???

3.還有一個新問題..我希望我的佈局如example3.txt
假如我要求用DIV及CSS做到這個效果,同時要兼容IE,FF及縮放下皆有相同效果,請問如何去"想"及寫呢?
"想"的意思是如何構想,因為發覺小弟在這方面也有點困難,..因為你們說FF中整個網頁的內容才可以是100%
那麼這個情況下d1,d3的高度是((100%-50px)/2)*100% 才可以達到相同效果,但百份比怎能減去px呢?
所以我想請教大家如何去想,然後才問如何寫...感謝回覆!

附加檔案:
example3.txt [677 Bytes]
被下載 339 次
FF.txt [178 Bytes]
被下載 281 次
IE.txt [254 Bytes]
被下載 334 次
發表人:  不惑仔Boohover [ 2006-04-04, 14:01 ]
文章主題 : 
個人覺得你需要仔細再了解一下CSS的spec，因為你CSS的基本觀念多半是有問題的，我們回答你的問題會有很大的溝通困難，只會浪費大家時間。

for "example3"：高度由瀏覽器自動調節就好了
代碼:
body {
   margin: 0;
   padding: 3px;
}
table {
   width: 100%;
   height: 100%;
}
.d1 {
   border:1px;
   background-color:red;
   text-align:center;
}

.d2{
   height:50px;
   border:1px;
   background-color:blue;
   text-align:center;
}

.d3 {
   border:1px;
   background-color:green;
   text-align:center;
}


不過，以上這種作法，在新的xhtml及css是不符合spec的，因為高度無法100%至視窗，只有在html下才會成功顯示你需要的。

另外，
html>body這種選取方式是，ie並不支援，而是支援較先進CSS語法的瀏覽器才支援，wini已在前面說得很清楚了。
而且我先前也說過，position:fixed;，ie並不支援。
請多了解一下CSS的真正意義吧，因為已經都把正確寫法給你了，你還是不懂也沒辦法嚕！
發表人:  不惑仔Boohover [ 2006-04-13, 13:53 ]
文章主題 :  提供一個不同的思考方式
提供一個不同的思考方式，將body以css-p方式定義，即可達成在ie及fx均可使用：

附加檔案:
bodyfixed.zip [788 Bytes]
被下載 353 次
第 1 頁 (共 1 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/