0

非常に単純な固定液体レイアウトを設定しています。ヘッダーは 100% に設定され、サイドバーは固定幅に設定され、左にフロートされます。コンテンツ領域の幅は定義されていません (残りのスペースを埋めるため)。

サイドバーとコンテンツ領域の間に約 3 ピクセルの空白が追加される IE を除くすべてのブラウザーで適切に機能します。

JSFiddle で問題を再現できないため (正確なコードをコピーして貼り付けても)、代わりに画像を添付しました。最初の画像は Chrome でレンダリングされ、2 番目の画像は IE9 でレンダリングされました。

クロム IE9


CSS (スタイル.css)

body {
    margin: 0px;
}
#header {
    width: 100%;
    height: 150px;
    background: #F00;
}

#sidebar {
    float: left;
    width: 280px;
    height: 1000px;
    background: #0F0;
}

#content {
    height: 1000px;
    background: #00F;
}


HTML

<html>
<head>
    <link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="header"></div>
    <div id="sidebar"></div>
    <div id="content"></div>
</body>

4

1 に答える 1

2

doctype 宣言を追加しようとしましたか?

<!DOCTYPE html>
  <html lang="en">
    <head>
      <link href="styles.css" rel="stylesheet" type="text/css">
    </head>
    <body>
      <div id="header"></div>
      <div id="sidebar"></div>
      <div id="content"></div>
    </body>
   </html>
于 2012-06-27T16:14:53.193 に答える