Html 元素以在需要时使用滚动条填充剩余的垂直高度

以下布局要求的最现代解决方案是什么：

两个元素将装入容器元素内部，而不是延伸到容器外部

每个都是100%宽度的容器

它们加在一起的高度总和与容器高度相同（可能涉及一些填充或边距）

标题

元素将垂直展开以适合其内容

.fillNscroll

元素用于将剩余的垂直空间填充到

div.info

的底部，如果垂直滚动条在该约束内溢出，则应用垂直滚动条

我可以只用CSS3和HTML5来实现这一点吗？（不担心与早期浏览器的兼容性）。如果没有，是否有jQuery插件

 +------------------------+
 |       <section>        |
 |   fixed width & height |
 |                        |
 |  +------------------+  |
 |  |     <header>     |  |
 |  | variable height  |  |
 |  |                  |  |
 |  |                  |  |
 |  +------------------+  |
 |                        |
 |  +------------------+  |
 |  |<div.fillNscroll> |  |
 |  | fill remaining   ^  |
 |  |   height         |  |
 |  |                  |  |
 |  |  with scrollbars |  |
 |  |   on overflow    |  |
 |  |                  |  |
 |  |                  V  |
 |  +------------------+  |
 |                        |
 +------------------------+

---

我可以只用CSS3和HTML5来实现这一点吗？（不担心与早期浏览器的兼容性）

看看它是否符合您的要求-@TimSPQR

的高度。fillNscroll

在页眉大小调整到适合其内容（不同）后，不会调整填充剩余的垂直高度。在你的小提琴中，它固定在200px。信息高度固定在300px吗？是否要将填充卷保留在.info中？如果是动态的，则必须使用js。@TimSPQR yes

。info

具有固定高度。是

.fillNscroll

将保留在

.info

内。内容被呈现dynamically@Pumbaa80所以根据那篇文章的说法，在2008年，仅仅使用css和html是不可能做到的，你说在2014年，我们仍然需要使用javascript来进行这种布局安排。如果是这样的话，我同意这是一个重复的问题

<section class="info">

    <header>
      <h1>Halophryne queenslandiae (and the occasional extra long name that causes the header to flow into multiple lines)</h1>
    </header>

    <div class="fillNscroll">
      <p>Variable length content. may overflow the .fillNscroll div eventually</p>
      <p>Variable length content. may overflow the .fillNscroll div eventually</p>
      <p>Variable length content. may overflow the .fillNscroll div eventually</p>
      <p>Variable length content. may overflow the .fillNscroll div eventually</p>
      <p>Variable length content. may overflow the .fillNscroll div eventually</p>
      <p>Variable length content. may overflow the .fillNscroll div eventually</p>
      <p>Variable length content. may overflow the .fillNscroll div eventually</p>
      <p>Variable length content. may overflow the .fillNscroll div eventually</p>
      <p>Variable length content. may overflow the .fillNscroll div eventually</p>
      <p>Variable length content. may overflow the .fillNscroll div eventually</p>
      <p>Variable length content. may overflow the .fillNscroll div eventually</p>
      <p>Variable length content. may overflow the .fillNscroll div eventually</p>
    </div>

  </section>

// make padding and border inside width and height for everything !
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

div, h1, h2, h3, p, .info {
  border: 1px solid red;
}

section.info {
  position: absolute;
  left: 50px;
  width: 200px;
  height:300px;
  padding: 10px;

  header { 

  }

  .fillNscroll{
    height: 100%;
  }

}