我遇到了100%身高的古老问题。我知道这个问题很多,我已经审核了this,this,this以及更多。我想创建一个基本的固定标题,侧面导航和主文章区域,如下所示:
但是,出于某种原因,它看起来像下面这样(我在蓝色条中放置200px填充只是为了让它出现)。
我的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
,并制作类似的内容:
但是,在我的实际网站中(我为此简化了),侧面导航具有下拉菜单,这将动态更改导航高度。这会导致以下情况发生:
绝对定位的元素不会改变相对包装器的高度,所以我需要浮动它们。但是,浮动它们不会使高度变为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。不知道为什么底部会有一个滚动条,但是如果你在浏览器中正常显示它就好了。
答案 0 :(得分:3)
height: 100%
表示100%的包含块height
。您的包含块section
没有定义height
(而是min-height
)。你可以:
min-height: 100%
上的section
更改为height: 100%
。或... min-height: 100%
并添加height: 1px
(或任何低于100%的内容),min-height
会覆盖这些内容。这里的关键是在父级上设置height
属性。
答案 1 :(得分:1)
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
并分配填充它是否有效!!
答案 2 :(得分:0)
试试这个:
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;
}