CSS：两列 - 一个固定宽度;另一个是视口的平衡

Question

如何制作一个100vh宽的高条形html页面，并且低于这两列？左侧列是左浮动的并且具有固定宽度。右侧的柱子向右浮动并占据水平空间的平衡，因此两列的宽度组合与高栏相同，即100vh。左侧列与右侧列并排放置，两者之间没有空格。

我需要一个css解决方案，不使用表，也不需要使用javascript。如果有帮助，我可以使用scss作为css。

到目前为止我得到了什么

这与我到目前为止一样接近：

header {
  width: 100vh;
  border-style: solid;
  border-width: 5px;
  border-color: saddlebrown;
  justify-content: space-between;
  }
  
header *  { background-color: chocolate;}
header h1 { text-align: center;}
header p  { text-align: justify;}
  
.two-columns {
  wide: 100vh;
}

.left-column {
  float: left;
  width: 300px;
  }
  
.right-column {
  float: right;
  width: 70vh;
  border-style: solid;
  border-width: 5px;
  border-color: green; 
  }

<header><h1>This high-bar should be 100vh wide.</h1>
<p>Lorem ipsum dolor sit amet, dictas eleifend id pro, inermis graecis recteque ut vix. Per invenire eleifend an. Duo vero nemore te, mediocrem vituperata qui eu. Semper numquam ne pri, et eos dico epicuri, cum in dicta oratio. Voluptaria inciderint eum ne, doctus patrioque vituperatoribus ei usu. Ut sed brute perfecto quaerendum, mei duis doming oporteat ea. At eam omittantur vituperatoribus. Sea te nobis euismod persecuti. Id alienum apeirian erroribus his, ad sit magna solum efficiantur, sanctus tibique ut sit. Eum dolorum voluptatibus ex, in eum fuisset insolens.</p>
</header>

<div class="two-columns">
  <div class="left-column">
    <p>This left column is a fixed 300px wide.</p>
    <img src="https://images.unsplash.com/photo-1484677460604-9c1334e783a1?ixlib=rb-0.3.5&s=057251dd8afbb9405720551a85f584ae&auto=format&fit=crop&w=300&q=80"/>
  </div>
  <div class="right-column">
    <p>This right column should take up the remainder of the space. The width of this bit should be 100vh - 300px - a bit for margins and borders and such.</p>
  </div>
</div>

上述解决方案是否有效，具体取决于浏览器或视口宽度。有时右列会错误地位于图像下方;有时它会与左栏有间隙。

我放了fiddle here。

Answer 1

我会选择使用flexbox来执行此操作：

＆＃13;

＆＃13;

<header>
  <h1>This high-bar should be 100vh wide.</h1>
  <p>Lorem ipsum dolor sit amet, dictas eleifend id pro, inermis graecis recteque ut vix. Per invenire eleifend an. Duo vero nemore te, mediocrem vituperata qui eu. Semper numquam ne pri, et eos dico epicuri, cum in dicta oratio. Voluptaria inciderint eum
    ne, doctus patrioque vituperatoribus ei usu. Ut sed brute perfecto quaerendum, mei duis doming oporteat ea. At eam omittantur vituperatoribus. Sea te nobis euismod persecuti. Id alienum apeirian erroribus his, ad sit magna solum efficiantur, sanctus
    tibique ut sit. Eum dolorum voluptatibus ex, in eum fuisset insolens.</p>
</header>

<div class="two-columns">
  <div class="left-column">
    <p>This left column is a fixed 300px wide.</p>
    <img src="https://images.unsplash.com/photo-1484677460604-9c1334e783a1?ixlib=rb-0.3.5&s=057251dd8afbb9405720551a85f584ae&auto=format&fit=crop&w=300&q=80" />
  </div>
  <div class="right-column">
    <p>This right column should take up the remainder of the space. The width of this bit should be 100vh - 300px - a bit for margins and borders and such.</p>
  </div>
</div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;