overflow-y Webkitブラウザ（ChromeとSafari）のページコンテンツを非表示にする

現在、私のウェブサイトはすべての主要ブラウザでサポートされていますが、私は非常に奇妙な問題に直面しています。隠された以下では、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

それが働いて取得する唯一の方法は、いずれかの高さを削除します（私のhtmlの目的を台無しにする）のdivやtableタグのための100％の属性、または高さを追加：HTMLタグに100％

誰にも提案はありますか？あなたがスタイルを閉じる必要があり

出典

2011-01-06 Victor F

'高さ：100％;' 0ピクセルの高さの結果。 100％の高さで達成したいことは何ですか？ –

私が作成している実際のページでは、divに100％の高さが必要です。これは動的に埋められます。 divには1行のデータが含まれていることがあります。また、何百行ものデータが含まれている場合があります。ユーザーがスクロールする必要があります。このdivがどれだけのデータを持っていても、できるだけ多くのスペースを占める必要があります。 –

属性

ありがとう問題は、あなたがheight: 100%;を使用する場合、それは親に自分の要素の高さが相対的に設定されることです。つまり、親要素に高さが設定されていない場合、高さは自動的に0ピクセル、またはコンテンツの高さのみになります。

あなたのコードが動作するためには、あなたは100％の高さに体とHTMLの両方を設定する必要があります。

html, body{ height:100%; }

出典

2011-01-06 21:30:39 Calum

他の解決方法があるはずですが同じように。ありがとう！ –

これはMac上のSafari 5.1では動作しません。ソリューションを探しています –

<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が正しく表示されません。引用符については、それは私のせいです。私はそれをひどくコピーしましたが、適切な引用符付きのバージョンも動作しません。 –

meh。なぜあなたはそのdoctypeを使っていますか？ – Calum

HTMLおよびXHTML標準に準拠して、DOCTYPEは、使用している（X）HTMLのバージョンをバリデータに通知します。 DOCTYPEは、準拠しているWebページの重要なコンポーネントです。マークアップとCSSは、マークなしでは検証されません。 DOCTYPESは、Mozilla、IE5/Mac、IE6/Winなどの準拠ブラウザでのWeb文書の適切なレンダリングと機能にも不可欠です。 http://www.alistapart.com/articles/doctype/ –

overflow-y Webkitブラウザ（ChromeとSafari）のページコンテンツを非表示にする

答えて

関連する問題