css - 幅を 100% に設定し、余白も設定する

Question

ページには、サイド バーとメイン コンテンツ領域の 2 つのセクションがあります。サイドバーの幅は 225px で、メイン コンテンツ エリアをページの 100% 幅にして、サイドバーの 225px を差し引いた幅にしたいと思います。そこで、メイン コンテンツ エリアの左側に 225 のマージンを設定して、サイド バーと重ならないようにしてから、幅を 100% に設定しましたが、これを行うと、ドキュメント全体が右側に 225 ピクセル押し出されます。ページ全体をゆがめます。幅を 100% に設定しながら余白を確保し、ドキュメントを押し出さないようにするにはどうすればよいですか? 私は持っている：

#main-content {
   position: absolute;
   margin-left: 225px;
   height: 100%;
   width: 100%;
}

#sidebar {
   position: relative;
   width: 225;
   height: 100%;
   background-color: #c00000;
}

Answer 1

試す

#main-content {
  position: absolute;
  left: 225px;
  right: 0;
  top: 0;
  bottom: 0;
}