画面の左側にナビゲーションがあるので、本文の幅を 100% に設定します。
ナビゲーションの幅は 60px です。追加の div は、画面の左側から 60px の位置から右側の端まで移動します。
私の問題は、常に本体と同じ幅に 60px を加えたものになり、画面の下部に x スクロールがあることです。
// これは幅 60px の左側にあります
left:0;
position:fixed;
width:60px;
height:100%;
//これはナビゲーションと画面の右側の間ですが、幅全体を占める必要があります。
background:black;
width:100%;
height:100px;
margin-left:60px;
画面の左側に幅 60 ピクセルの何かを表示し、それを画面の右側に接続する div を過度に拡張することなく表示するにはどうすればよいですか?
広く文書化されている固定流体レイアウトが必要なようです。固定部分の幅は 60px で、流動部分は残りの幅を取る必要があります。インスピレーションを得るためにダイナミックドライブを見てみましょう。
必要に応じて、これをbodyの css:に追加overflow-x:hiddenすると、右側の余分な 60px が切り取られ、スクロールバーが表示されなくなります。ただし、div 内のコンテンツも切り取られる場合があります。それは、divに何を配置しているかに大きく依存します。
これらのシナリオに使用するソリューションは常に 1 つtableですが、テーブルを使用したくないというのが私の仮定です。デザインを維持divsしながら、div の表示プロパティをテーブルとして設定して機能させることができます。ここで解決策のフィドルを見つけてください。
これは思い通りに機能し、右側のメイン コンテンツ パーツにも水平スクロールは表示されません。お役に立てれば。