overflow-y在webkit瀏覽器中隱藏頁面內容（Chrome和Safari）

我目前正在使我們的網站得到所有主流瀏覽器的支持，並且遇到了一個非常奇怪的問題 - oveflow-y屬性導致我的數據成爲隱。下面我有一個簡單的代碼示例，它適用於IE和Firfox，但在Safari和Chrome中不起作用。這是一個100％有效的代碼，我不確定它爲什麼不能在webkit瀏覽器中正確顯示。overflow-y在webkit瀏覽器中隱藏頁面內容（Chrome和Safari）

<!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> 
    <title></title> 
</head> 

<body style="height: 100%;"> 

<form action="Webkit_Problem.html" style="height: 100%;"> 
<table style="height: 100%;"> 
    <tr> 
     <td> 
      <div style="overflow-y: auto; height: 100%;"> 
       THIS SHOULD BE VISIBLE 
      </div> 
     </td> 
    </tr> 
</table> 
</form> 
</body> 
</html>

http://www.alocet.com/VictorsTestFolder/Webkit_Problem.html（住在這裏樣品）

只有這樣，才能得到它的工作要麼刪除高度：100％屬性的股利或表標籤（這會毀了我的HTML的目的），或添加高度：100％html標籤

有沒有人有任何建議？

謝謝

來源

2011-01-06 Victor F

'高度：100％;在0像素的高度`結果。你想以100％身高完成什麼？ – 2011-01-06 20:59:11

在我創建的真實頁面中，高度爲需要動態填充的div的100％。有時div可能包含一行數據，有時可能包含數百行數據，用戶需要通過它滾動。無論這個div有多少數據，它仍應占用盡可能多的空間（以保持一致）。 – 2011-01-06 21:04:51

的問題是，當你使用height: 100%;，它的元素的高度相對於其父設置樣式屬性。這意味着如果你的父元素沒有設置高度，它將自動爲0px高度，或者只有你的內容高度。

爲了使您的代碼工作，你需要對身體和HTML都設置爲100％高度：

html, body{ height:100%; }

來源

2011-01-06 21:30:39 Calum

<form action="Webkit_Problem.html" style="height: 100%;"> 
<table style="height: 100%;"> 
    <tr> 
     <td> 
      <div style="overflow-y: auto; height: 100%;"> 
       THIS SHOULD BE VISIBLE 
      </div> 
     </td> 
    </tr> 
</table> 
</form>

您需要關閉與引號

來源

2011-01-06 21:04:05 Calum

不幸的是，我已經指定了doctype（這是一個標準的dtd），您的html仍然無法正確顯示。對於引號，這是我的錯，我把它複製得不好，但帶有適當引號的版本也不起作用 – 2011-01-06 21:07:42

overflow-y在webkit瀏覽器中隱藏頁面內容（Chrome和Safari）

回答

相關問題