固定宽度的CSS侧边栏[无JS]

Question

我有一个问题，我想垂直分割窗口

-----------
|Div 1 |D2|
|      |  |
-----------

#D2{
   position: fixed;
   top: 0;
   right: 0;
   height: 100vh
}

这里有个要注意的地方：D2有一个图像，该图像按比例缩放，因此宽度取决于高度。 当前Div 1正在使用全宽度（100％），但我不知道该怎么做：100vw-（＃D2 [val]）vw

Answer 1

柔性 ？ 在http://codepen.io/gcyrillus/pen/VaaaRK上播放此代码段，或在下面运行。

如果您认为flex仍然是最新的，则可以使用display:table; http://codepen.io/gcyrillus/pen/WwwGXr

 /* 101 */ body { display: flex; margin: 0; } #one { flex: 1; } img { display: block; height: 100vh } /* extra */ body { background: #F4BB2D } #one { display: flex; align-items: center; justify-content: center; text-align:right; color: #89870A; font-size: 7vw; text-shadow: 1px 1px black, -1px -1px 1px gray } img { box-shadow: 0 0 5px; } 

 <div id="one"> Click Full Page <br/> Or Close </div> <div id="two"> <img src="http://lorempixel.com/200/500/nature/6" /> </div> 

添加了一些额外的地面单词以尝试打破它，将D2下推

 /* 101 */ body { display: flex; margin: 0; } #one { flex: 1; } img { display: block; height: 100vh } /* extra */ body { background: #F4BB2D } #one { display: flex; align-items: center; justify-content: center; text-align:right; color: #89870A; font-size: 7vw; text-shadow: 1px 1px black, -1px -1px 1px gray } img { box-shadow: 0 0 5px; } 

 <div id="one"> <blocquote>ClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrCloseClickFullPageOrClose<br/> <cite> Zi stutterer that came from mars </cite></blockquote> </div> <div id="two"> <img src="http://lorempixel.com/200/500/nature/6" /> </div>