2

左側に固定幅と固定位置のサイドバーがあるレイアウトを作成しようとしています。

問題は、メイン コンテンツ エリアの幅を設定することです。画面から右に伸びます。これが私が持っているものです：

<body>
    <div class="left-sidebar">
        sidebar
    </div>
    <div class="main-content">
        main
    </div>
</body>

CSS:

body {
    position: relative;
}

.left-sidebar {
    position: fixed;
top: 0;
left: 0;
width: 220px;
}

.main-content {
position: absolute;
top: 0;
left: 220px;
background: #f0f0f0;
width: 100%;
}

メイン コンテンツの div を左から 220 ピクセルで開始し、ウィンドウの幅だけを埋めるにはどうすればよいですか?

4

1 に答える 1

0

メイン コンテンツが完全に左に表示されるように設定してみてください。 

.main-content {
  position: absolute;
  top: 0;
  left: 0px;
  margin-left: 220px;
  background: #f0f0f0;
  width: 100%;
}

編集：
コードを試す時間が少しありました。padding-left の代わりに margin-left を提案しました。margin を使用すると、コンテンツの周りに境界線を引くことができます。また、実際にコンテンツにパディングが必要な場合は、通常どおりに設定できます。サイドバーのインデントにパディングを使用した場合は、必要な実際のパディングに 220px を追加する必要があります。

これは、パディングではなくマージンで動作させるために私が思いついたものです。 

body {
  margin: 0;
  padding: 0;
  border: 0;
}

.left-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 220px;
  border: 1px solid green;
}

.main-content 
{
  position: fixed;
  top: 0;
  left: 0px;
  right: 0px;
  margin-left: 220px;
  background: #f0f0f0;
  border: 1px solid red;
}

また、動的ドライブを参照する anser にも同意します。最初に CSS を学習する最良の方法の 1 つは、作業用のスタイルシートを試して、ニーズに合わせてカスタマイズすることです。大きな利点は、すでにクロスブラウザー互換性があることです。Google を使用して、ちょっとしたインスピレーションを見つけてください。

于 2012-12-21T16:46:32.030 に答える