Question

我遇到了100％身高的古老问题。我知道这个问题很多，我已经审核了this，this，this以及更多。我想创建一个基本的固定标题，侧面导航和主文章区域，如下所示：

how it should look

但是，出于某种原因，它看起来像下面这样（我在蓝色条中放置200px填充只是为了让它出现）。

how it does look

我的HTML如下所示：

<!DOCTYPE html>
<html>
<head></head> 
<body>

<header></header>

<section>

<nav></nav>

<article></article>

</section>

</body>
</html>

我的CSS看起来像这样：

* { -moz-box-sizing: border-box; background-color: transparent; border: 0 none; color: #000000; list-style: none outside none; margin: 0; outline: medium none; padding: 0; text-decoration: none; }

body, html { height: 100%; } 

header {
  background: #6c6363;
  top: 0;
  z-index: 100;
  height: 100px;
  left: 0;
  position: fixed;
  right: 0;
}

section {
  min-height: 100%;
  overflow: auto;
  position: relative;
  padding-top: 100px;
}

nav {
  background-color: #747feb;
  float: left;
  min-height: 100%;
  padding-bottom: 200px;
  width: 150px;
}

article {
  background: #74eb8a;
  margin: 20px 20px 20px 170px;
  min-height: 100%;
  padding: 20px;
  position: relative;
}

正如你所看到的，没有什么特别的。我知道section需要100％的身高，body和html也是如此。我可以绝对定位nav和acticle，并制作类似的内容：

enter image description here

但是，在我的实际网站中（我为此简化了），侧面导航具有下拉菜单，这将动态更改导航高度。这会导致以下情况发生：

enter image description here

绝对定位的元素不会改变相对包装器的高度，所以我需要浮动它们。但是，浮动它们不会使高度变为100％。

我甚至做了一个JSFiddle来显示问题：http://jsfiddle.net/g8VjP/

如果有人可以帮助我，我会非常感激。

谢谢！

PS：如果有效的话我会使用calc（）！

解

我修改了Mayank的答案，并设法找到了解决方案。我不得不添加几个包装器，但它有效。我的HTML现在如下所示：

<!DOCTYPE html>
<html>
    <head></head> 
<body>

<header></header>

<section>

<nav></nav>

<div class="cell-wrap">
    <div class="table-wrap">
        <article></article>
    </div>
</div>

</section>

</body>

</html>

密钥为cell-wrap和table-wrap。我的nav是一个表格，而.cell-wrap是另一个。如果nav有固定的，.cell-wrap填写其余部分。但是，我想要article左右的间距，所以我添加了.table-cell并将其放入表中。然后扩展并填充.cell-wrap的高度和宽度。然后我添加30px填充以在article周围留出空格（因为边距对表格单元格不起作用）并使article成为表格单元格。

有点令人困惑，但它确实有效！

我的CSS如下：

* { -moz-box-sizing: border-box; background-color: transparent; border: 0 none; color: #000000; list-style: none outside none; margin: 0; outline: medium none; padding: 0; text-decoration: none; }

body, html { height: 100%; } 

header {
  background: #6c6363;
  top: 0;
  z-index: 100;
  height: 100px;
  left: 0;
  position: fixed;
  right: 0;
}

section {
  display: table;
  height: 100%;
  min-height: 100%;
  padding-top: 100px;
  position: relative;
  width: 100%;
}

nav {
  background-color: #657182;
  display: table-cell;
  min-height: 100%;
  width: 150px;
}

.cell-wrap {
  display: table-cell;
  height: 100%;
  min-height: 100%;
}

.table-wrap {
  display: table;
  height: 100%;
  padding: 30px;
  width: 100%;
}

article {
  background: none repeat scroll 0 0 #FFFFFF;
  display: table-cell;
  min-height: 100%;
  padding: 20px 20px 120px;
  z-index: 1;
}

Here's the fiddle。不知道为什么底部会有一个滚动条，但是如果你在浏览器中正常显示它就好了。

Answer 1

height: 100%表示100％的包含块height。您的包含块section没有定义height（而是min-height）。你可以：

将min-height: 100%上的section更改为height: 100%。或...
保留min-height: 100%并添加height: 1px（或任何低于100％的内容），min-height会覆盖这些内容。

这里的关键是在父级上设置height属性。

Answer 2

display:table和display:tabel-cell你是这里的朋友吗？
将您的小提琴更新为轻微的解决方法，然后转到： DEMO

要修改的CSS：

section {
    min-height: 100%;
    overflow: auto;
    position: relative;
    padding-top: 100px;
    display:table;/* addition */
}
article {
    background: #74eb8a;
    margin: 0px 20px 0px 170px;
    min-height: 100%;
    width:100%;
    height: 100%;
    position: relative;
    display:table-cell; /* addition */
 }

此外，我冒昧地删除您放置在padding内的额外article，在div内插入section或article并分配填充它是否有效!!

Answer 3

试试这个：

nav {
  background-color: #747feb;
  width: 150px;
  position : absolute;
  top : 100px;
  left : 0;
  bottom : 0;
}

 article {
  background: #74eb8a;
  position: absolute;
  top : 100px;
  left : 150px ; /* nav width*/
  bottom : 0;
  right : 0;
 }

100％不工作

3 个答案: