私は2列レイアウトです。左の列の幅は300ピクセルです。私は右の列が残りのモニタースペースの全幅を占めるようにしたいと思います。しかし、私はちょうどこのpxと％の混合がどのように働くかを理解できません。誰でもアイデアはありますか？固定幅の列と残りの幅の列の2列のレイアウトはどうすればできますか？
私はjsを使ってユーザーのビューポートの幅を取得し、動的にインラインスタイルを追加することができます。しかし、すべてのウィンドウのサイズ変更などを行う必要があります。純粋なCSSソリューションが必要です。
私はthirtydot's answerを好む：
最小CSSの要件：[適切にCSSを使用した側が2列側をフロートする方法]
#sideBar {
width: 300px;
float: left;
}
#mainContent {
overflow: hidden;
}
解像度を非常に小さくして、右の列のサイズがページ全体の幅よりも小さい場合には、もう一方のソリューションが失敗しました。しかし、これは素晴らしい作品です。私は転記する前にこれを試しましたが、失敗する原因となっていた第2列に浮きが残っていました。 – Floyd
はここであなたのための可能な方法である：http://jsfiddle.net/mqchen/RDLMm/
素敵なトリック、ありがとう。 – Floyd
このメソッドは、両方の列の高さがわかっていて等しい場合にのみ機能しますか？ –
一つのアプローチは、左の上の固定幅列をフロートしてから他の列をシミュレートするためのマージンを使用することです。このような何か：
<div id="sidebar">
<!-- ... -->
</div>
<div id="content">
<!-- ... -->
</div>
そして、いくつかのCSS：デフォルトdisplay:blockと
<div>
#sidebar {
float: left;
width: 300px;
}
#content {
margin-left: 300px;
}
は自然にすべての利用可能な幅を取り上げます。 300pxの左余白は、固定幅の列の空白を残します。
見る（http://stackoverflow.com/questions/5589947/how-to-properly-float-two -columns-side-by-side-with-css）を使用します。 – NGLN