3

好的，所以，任何使用 css 和 html 足够长的时间的人都可能处理过“高度：100%”的荒谬问题。我已经阅读了一些关于处理它的东西，但它并没有太大帮助。下面是我需要构建的布局。我希望一个好的答案能帮助我处理大多数其他需要高度的结构。
规则：

  • 它必须填满浏览器窗口而不提供任何滚动条。
  • 容器的高度不得超出可见区域（即不需要在 html 或 body 标签上添加“overflow:hidden”来移除滚动条）
  • FLEX 区域应该可以根据给定的像素测量值进行调整，而 FILLER 应该填充任何可用的区域。
  • 所有区域都应严格调整大小，以便在溢出时将其内容切断，而不会使区域变大。
  • 如果可能的话，我宁愿在没有“位置：固定”或“位置：绝对”的情况下这样做，以防以后我需要在其他包装器中使用这样的结构，但现在我会很高兴如果它是可能的反正。
  • 最后，我真的不想为此使用 javascript。
+--------------------------------------------+
| 弹性 /\ |
| \/ |
+-----------------------------------+--------+
| | |
| | |
| | |
| | |
| /\ | |
| <填充> | 弹性 |
| \/ | <- -> |
| | |
| | |
| | |
| | |
+-----------------------------------+--------+

编辑：
到目前为止，我发现我可以实现@cimmanon 在他的第二个示例中所说的内容，并且消除了标题一侧的多余空间。我通过创建两个表来做到这一点（一个用于包装标题和另一个用于包装内容和侧边栏的表），这是一种不好的做法。但如果这是唯一的方法（同时尝试坚持使用经典 CSS，并避免使用 flexbox 之类的技巧），那么我会坚持使用它。

我还有一个问题，在@cimmanon 的第二个例子中也有这个问题：我的规则之一是：所有区域都应该严格调整大小，以便在溢出时切断它们的内容，而不会使区域变得更大。. 在为每个容器添加一堆随机框后，我发现它们将底部的两个容器推出到浏览器底部之外，从而创建了一个滚动条。这是因为令人讨厌的概念 height:100% 表示浏览器的视口高度，或者内容的高度（如果它更高）——在这种情况下就是这样。

有没有办法解决？

4

2 回答 2

4

最优雅的方法是使用 Flexbox。

http://codepen.io/cimmanon/pen/rifzt

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#layout {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  /* fix for old Firefox */
  width: 100%;
}

#layout header {
  height: 10em;
  background: #ffffcc;
}

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1 auto;
  -ms-flex: 1 auto;
  flex: 1 auto;
  /* fix for old Firefox */
  width: 100%;
}

#layout article {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

#layout aside {
  width: 15em;
  background: #ccccff;
}

<article id="layout">
  <header>
    <h1>Header Title</h1>
  </header>

  <div class="wrapper">
    <article>
      <h1>Another Title</h1>

      <p>...</p>
    </article>

    <aside>
      <h1>Aside Title</h1>

      <p>...</p>
    </aside>
  </div>
</article>

http://caniuse.com/flexbox

您可以改为使用 table/table-row/table-cell 显示属性来执行此操作，但您必须添加许多额外的标记才能使其工作。

这几乎可以工作，但标题并没有完全跨越视口的整个宽度。如果你添加足够多的元素，你也许可以做到。

http://tinker.io/38b0d

html {
    height: 100%;
}

body {
    display: table;
    width: 100%;
    height: 100%;
    background: yellow;
}

header {
    height: 10em;
    display: table-row;
}

article {
    display: table-row;
    height: 100%;
    width: 100%;
    background: grey;
}

article div, article aside {
    display: table-cell;
    height: 100%;
}

article aside {
    width: 10em;
    background: orange;
}

<header>Header</header>

<article>
    <div class="main">
        Remaining Space
    </div>

    <aside>
        Sidebar
    </aside>
</article>
于 2013-05-19T19:03:30.913 回答
0

给你的包装器一个固定的高度，然后使用百分比（例如，flex = 25％和filler = 75％）划分flex和filler的高度，否则你将不得不使用javascript（window.innerHeight）来获取该页面的窗口高度中查看。

于 2013-05-19T12:50:31.193 回答