Question

我正在构建一个网站，其标题覆盖浏览器窗口高度的100％。当我将html-element设置为height：100％时，这没有问题。

但是，由于我在网站上也有CSS覆盖，我需要将html元素设置为min-height：100％，以便在滚动页面时覆盖层可以拉伸整个页面。

但是当我将html-element设置为min-height：100％时，标题的高度将减少到标题的唯一子元素的高度，具有相对定位和固定高度。

如果我设置了绝对定位的标题，它也有效，但我不想这样做，因为它弄乱了网站其余部分的位置（我设计从标题下方开始，不落后。

我把一个小提琴放在一起来说明我的问题：

<header id="header">  
<div class="header-head">I am the header head</div>
<div class="header-content">I am the header content</div>
<div class="header-footer">I'm the header footer!</div>
</header>   

<div class="content">
<h1>This is the page content</h1>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint blanditiis perspiciatis nesciunt possimus minus molestiae culpa necessitatibus atque ut eveniet id magnam delectus reprehenderit! Ad atque aperiam rerum quas vitae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit esse nihil iusto ea natus aliquam enim ducimus deleniti vitae quibusdam
</div>

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

body {
    font-family: 'Open Sans', sans-serif;
    color: black;
    position: relative;
    height: 100%;
    width: 100%;
}

#header {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    position: relative;
}

.header-head {
    width: 100%;
    height: 68px;
    background-color: green;
    position: absolute;
    text-align: center;
}

.header-content {
    width: 100%;
    height: 15%;
    top: 30%;
    background-color: blue;
    position: absolute;
    text-align: center;
}

.header-footer {
    width: 100%;
    height: 20%;
    position: absolute;
    bottom: 0; 
    left: 0;
    background-color: red;
    text-align: center;
}

.content {
    margin: 30px;
}

h1 {
    font-family: 'Federo', sans-serif;
}

JSFiddle showing the problem

考虑到上述限制，有没有人知道是否有可能解决这个问题？

非常感谢任何帮助！

Answer 1

从relative

中删除position body

DEMO http://jsfiddle.net/LLkfbb2x/2/

Answer 2

min-height：100vh（或）你希望它拥有的像素高度是多少？

html, body {
    margin: 0;
    min-height: 100vh;
}

http://jsfiddle.net/LLkfbb2x/1/

具有最小高度100％的html元素的子（具有相对定位）不适用高度100％

2 个答案: