4

HTMLとCSSの本を読んでいます。2列レイアウトのサンプルコードがあります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <style>
        #main {height: 1%; overflow: auto;}
        #main, #header, #footer {width: 768px; margin: auto;}
        #bodycopy { float: right; width: 598px; }
        #sidebar {margin-right: 608px; }
        #footer {clear: both; }
    </style>
</head>
<body>
    <div id="header" style='background-color: #AAAAAA'>This is the header.</div>
    <div id="main" style='background-color: #EEEEEE'>
        <div id="bodycopy" style='background-color: #BBBBBB'>
            This is the principal content.<br />
            This is the principal content.<br />
            This is the principal content.<br />
            This is the principal content.<br />
            This is the principal content.<br />
            This is the principal content.<br />
            This is the principal content.<br />
            This is the principal content.<br />
            This is the principal content.<br />
            This is the principal content.<br />
            This is the principal content.<br />
            This is the principal content.<br />
            This is the principal content.<br />
            This is the principal content.<br />
            This is the principal content.<br />
        </div>
        <div id="sidebar" style='background-color: #CCCCCC'>
            This is the sidebar.
        </div>
    </div>
    <div id="footer" style='background-color: #DDDDDD'>This is the footer.</div>
</body>
</html>

著者は、オーバーフロー自動と1％の高さを使用すると、メイン領域が拡張されて、計算されたコンテンツの高さが含まれるようになると述べています。1％の高さを削除して、さまざまなブラウザで試しましたが、違いは見られません。私はその使用法についてかなり混乱しています。何か案が？

4

2 に答える 2

2

これは、IE6/7で発生するhasLayoutのバグに関連しています。これheight: 1%は一般的な修正の1つです。他のものはzoom: 1;（CSSでは検証されません）とoverflow: auto;です。

したがって、両方 height: 1%;を削除してoverflow: auto;からIE6 / 7を削除すると、hasLayoutのバグが発生する可能性があります。違いが見られるかどうかは、テンプレートの将来の開発によって異なります。

于 2010-05-09T00:00:05.910 に答える
0

ここのquirksmodeに関する記事から、各部分がどのように機能するかについての推論についてもう少し読んでください。具体height的には、ここにリストされている理由がありますが、テストするOperaはありません（特定のバージョンは提供されていません）。

Explorer WindowsおよびOperaでエフェクトを機能させるには、widthまたは宣言を使用する必要があります。heightこれを含めない場合、Explorer Windowsは、オーバーフローがなかったかのように、列の上部に境界線を表示し続けます。Operaはコンテナの内容を完全に隠します。

于 2010-05-08T23:56:04.967 に答える