1
固定サイズのサイドバーと流体コンテンツ領域のCSSレイアウトが必要です。問題は、このフォーマットのほとんどのCSSレイアウトは、サイドバーを配置するためにfloatを使用することです。このため、私はコンテンツ領域の内部と内部の両方をクリアにすることはできません。レイアウトの問題：固定サイズのサイドバーに流体の内容とクリアがあります
添付のHTMLをご覧ください。コンテンツ領域は、浮動小数点数でナビゲーションコンテンツの一番下までスキップされます。
このタイプのCSSレイアウトの解決策が必要ですが、コンテンツエリア内でフロート/クリアを使用することができます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
body {
margin: 0;
padding: 0;
}
#nav {
float: left;
width: 160px;
}
#content {
margin: 0 0 0 200px;
background-color: green;
}
</style>
</head>
<body>
<div>
<div id="nav">
This is the nav content<br/>
This is the nav content<br/>
This is the nav content<br/>
This is the nav content<br/>
This is the nav content<br/>
This is the nav content<br/>
This is the nav content<br/>
This is the nav content<br/>
This is the nav content<br/>
This is the nav content<br/>
This is the nav content<br/>
This is the nav content<br/>
This is the nav content<br/>
This is the nav content<br/>
This is the nav content<br/>
</div>
<div id="content">
This is the main content<br/>
This is the main content<br/>
This is the main content<br/>
This is the main content<br/>
<div style="padding: 10px; float: left; width: 100px; background-color: yellow;">Left</div>
<div style="padding: 10px; float: right; width: 100px; background-color: orange;">Right</div>
<div style="clear: both;"> </div>
(This shouldn't be way down here) This is the main content<br/>
This is the main content<br/>
This is the main content<br/>
This is the main content<br/>
</div>
</div>
</body>
</html>
トップに追加する必要がありました。左：0; IEのためにも、これは動作します。本当にありがとう。それが単純な修正であるとき、あなたはそれを愛してはいけません。 –