Question

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

两个元素适合容器元素，而不是扩展到容器外部。

每个都是100％宽度的容器。

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

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

.fillNscroll元素是将剩余的垂直空间填充到div.info的底部，如果它在该约束内垂直溢出，则应用垂直滚动条。

我能用CSS3和HTML5做到这一点吗？（不担心与早期浏览器的兼容性）。如果没有jQuery插件？

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

HTML5：

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

CSS（LESS）：

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

}

我能用CSS3和HTML5做到这一点吗？（不担心与早期浏览器的兼容性）

如果需要，使用滚动条填充剩余垂直高度的元素

0 个答案: