100％不工作（感觉真的很愚蠢）

我遇到了100％高度的老问题。我知道这个问题问了很多，我已经回顾了this,this,this和无数。我想创建一个基本固定的头，边导航和文章主要区域，看起来像这样：100％不工作（感觉真的很愚蠢）

how it should look

但是，由于某种原因，它看起来像蓝条以下的（我把200像素填充刚让它出现）。

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（），如果它工作的话！

SOLUTION

我修改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。不知道为什么在底部有一个滚动条，但如果你在浏览器中正常显示它，看起来很好。

来源

2013-12-13 Kenton de Jong

下面是一个[示例]（http://jsfiddle.net/AxEPc/1）。 [caniuse calc（）]（http://caniuse.com/calc） – Vucko

display:table and display:tabel-cell在这里你是朋友mate！
更新你的小提琴轻微的变通方法，并在这里你去：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之内，如果它有效，并为它指定填充值！

来源

2013-12-13 07:26:59 NoobEditor

这并不适用于我，但它的确让我朝着正确的方向解决了我的问题。我从来没有想过使用表格和表格单元格。对我来说，这看起来很诡异！但它的工作！查看问题的解决方案。再次感谢！ –

欢迎...没问题！ :) – NoobEditor

height: 100%意味着100％的包含块的height。您的包含区块section没有定义的height（而是代替min-height）。您可以：

更改min-height: 100%在section到height: 100%。或...
保留min-height: 100%并添加一个height: 1px（或任何小于100％的东西），这将被min-height覆盖。

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

来源

2013-12-13 07:22:23 myajouri

尝试：

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

来源

2013-12-13 07:34:41

100％不工作（感觉真的很愚蠢）

回答

相关问题