没有固定宽度的粘性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

Flex？在http://codepen.io/gcyrillus/pen/VaaaRK使用此代码段或在此处运行。

如果您认为flex仍然过时，那么您可以使用display:table; http://codepen.io/gcyrillus/pen/WwwGXr

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

添加了一些额外的地面词来尝试打破它推动D2

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;