0

このフィドルをチェックしてください：

http://jsfiddle.net/9EJpu/25/

青色の div を水平方向に 100% 引き伸ばして、紫色の右側の div にドッキングするにはどうすればよいですか?

width:100% を設定すると、紫色の div を「改行」するために div が使用されることを行うだけです。

私もdisplay:inline(-block)を試しましたが、紫色のdivを同じままにするのに役立つものは何もありませんでした

青いdivとしての行。

ソリューションは IE9 で動作する必要があります。CSS3 ハッキングはご遠慮ください。

4

5 に答える 5

1

あなたの質問を正しく解釈すれば、いくつか変更する必要があります...

#wrap {
   width:100%;
    height:100%;
   background-color:green;
   position: relative;
}
#left_col {  
    overflow:auto;
   float:left;
   height:100%;
   margin-right: 100px;
    background-color:blue;
}
#right_col {   
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width:100px;
   background-color:purple;
}

に追加できますposition: fixedが#right_col、フッターを覆うことになります。

ここにデモがあります：

http://jsfiddle.net/xuBfe/ </p>

于 2012-06-11T18:54:03.487 に答える
0

box-sizingより安全なプロパティ を利用する別の可能な解決策。

http://tinkerbin.com/Vi1Rtt1T

于 2012-06-11T19:00:53.177 に答える
0

CSS3 の比較的安全な calc プロパティを使用します。-> http://jsfiddle.net/joplomacedo/9EJpu/27/

ただし、より安全なプロパティを使用することもできます。これは、既存のマークアップでそれを行う最も簡単な方法のように思えました。

于 2012-06-11T18:49:11.133 に答える
0

例：

http://jsfiddle.net/hunter/9EJpu/37/

メイン パネルのコンテンツを適切な幅にするために、ラッピング要素を内部に追加できます。left-col

#left_col
{      
    overflow:auto;
    float:left;
    height:100%;
    width:100%;
    background-color:blue;
}

#left_col > *
{
    margin-right: 100px;
}

#right_col 
{
    right: 0;
    top: 0;
    position:fixed;
    z-index: 1000;
    height:100%;
    float:right;
    width:100px;
    background-color:purple;
}

#footer
{
    width: 100%;
    bottom: 0;
    left: 0;
    position: fixed;
    background-color:yellow;
    z-index: 2000;
}
于 2012-06-11T18:56:55.557 に答える
-1

青の幅を 100% にし、右側を紫の幅で埋めます。紫は右側に固定する必要があります。

編集：

はい、忘れました。では、紫の幅 (青の内側) で div を右側にフロートします。下に物が入らないようにスペースホルダーが必要です

于 2012-06-11T18:52:24.300 に答える