4

左側を に設定しwidth: 40%、右側を非表示に設定した 2 列の可変レイアウトを使用していwidth: 60%ます。ユーザーがブラウザのサイズを好きなだけ大きくしたり小さくしたりできるようにしたいのですが、左側のディスプレイの最小幅を300px.

以下は、min-width仕様を含む流体レイアウトに現在使用しているコードです。しかし、CSSはそれを無視しています! 左側の列を より下に縮小できます300px。

min-widthなどのパーセンテージを設定しようとしました20%が、CSS はこの指定も無視します。

div#left {
background: #ccc;
position: fixed;
top: 0;
bottom: 0; 
left: 0;
width: 40%;
min-width:300px;
height: 100%;
}

div#right {
background: #aaa;
position: fixed;
top: 0; 
width:60%;
right: 0;
bottom: 0;
}
​

jsFiddle フルスクリーンの例: http://jsfiddle.net/umgvR/3/embedded/result/

jsFiddle コード: http://jsfiddle.net/umgvR/3/

これは何が原因ですか？コードはどのように修正できますか?

4

3 に答える 3

1

これもうまくいくはずです...

html

<div id="container">
        <div id="left">Left</div>
        <div id="right">Right</div>
</div>

CSS

body, div {width:100%;
                height:100%;
                margin: 0;
            }

            #container {
                display:block;position: fixed;
            }
            #left, #right {
                display: inline-block;
            }
            div#left {
                background: #ccc;
                min-width: 300px;
                max-width: 40%;
            }

            div#right {position:fixed;
                background: #aaa;
                width: 60%;
            }
于 2012-12-21T04:10:39.510 に答える
1

固定されたポジショニングにあまり執着していない場合は、これで目的が達成されるはずです。

JSFiddleで見る

HTML

<div id="left">Left</div><div id="right">Right</div>

要素間に空白がないことに注意してください

CSS

html, body {
  height: 100%;
}
body {
  min-width: 800px;
}
div#left {
  background: #ccc;
  display: inline-block;
  width: 40%;
  min-width:300px;
  height: 100%;
}

div#right {
  background: #aaa;
  display: inline-block;
  width:60%;
  height: 100%;
}
于 2012-12-21T03:37:48.767 に答える
0

左側の div は最小幅を維持しているが、右側の div の下にあることがわかりました。手前に持ってくると、右のdivの上に表示されます。私はこれが理想的だとは思いません。

 z-index: 1;

私は z-index: 1; を使用しました。左右および z-index: 0; 右のdivに。

それは機能しますが、もっと良い解決策があると思います。

于 2012-12-21T03:26:48.910 に答える