两列文字，如何使页面填充到所有分辨率的底部？

Question

我有笔记本和台式机的这种布局：

当屏幕有更多高度时，文本仍应填充到页面底部。可以升大字体。问题是，在调整字体大小或使用vh之类的东西时，随着字体大小的增加，它会使用更多的线条，因此，创建额外的线条，最终会导致更多的意外高度。为了避免这种情况，我们可能会定义要在vh中定义的列的宽度。如果屏幕实际上不够宽以使其适合，这将导致问题。

我是否过于复杂化，是否有更简单的解决方案？

Answer 1

如果您不想更改font-size，则可以根据视口高度更改line-height属性。因此，当屏幕较大时，线条之间的空间会增加，而不会创建额外的＆＃34;增加字体大小时可能获得的高度。但这可能并不总是看起来美观。

Answer 2

由于您将其标记为css3，我建议您查看css column-count属性：

https://developer.mozilla.org/en/docs/Web/CSS/column-count

这样你就可以设置高度（例如％），让css为你处理。

希望它有用。

Answer 3

您可能需要一些替代行为，例如在大屏幕上限制宽度，居中垂直页面而不是拉伸，调整字体大小但保持一个安全值以使其仍然可读......

html {
  height: 100%;
  display: flex;
}
body {
  margin: auto;
}
main {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}
header,
footer {
  background: gray;
  text-align: center;
}
body {
  width: 80%;
  font-size: calc(0.75vh + 0.75vw)
}
@media all and (max-width: 800px),
(max-height: 400px) {
  body {
    font-size: 12px;
  }
}

<header>header</header>
<main>
  <h1>HTML Ipsum Presents</h1>

  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
    placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
    tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

  <h2>Header Level 2</h2>

  <ol>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ol>

  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
      elit sit amet quam. Vivamus pretium ornare est.</p>
  </blockquote>

  <h3>Header Level 3</h3>

  <ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ul>

  <pre><code>
#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}
</code></pre>
</main>
<footer>footer
  <footer>

Demo to play with