html - css 百分比高度和宽度

Question

我知道，为了使元素的高度为视口(viewport)的 100%，父级必须具有固定的高度，或者对于 html 和正文，高度为 100%。

我的问题是我想在屏幕中间有一个介绍标题，我想很简单，我会制作一个 100% 宽度和高度的 div，然后用户向下滚动以到达其余内容...没那么容易。为了使 div 成为 100% 高度，我需要将 html 高度设置为 100%，但是当我这样做时，渐变背景会重复自身，因为它读取视口(viewport)的高度(html 100%)而不是内容。

站点是here .

代码:

<div class="intro">
   <div class="intro_text">
        <h2><?php the_title(); ?></h2>
        <h3><?php the_date('Y'); ?></h3>
   </div>
</div>

<div id="content">
   <!--The user scrolls down to see this-->
</div>

html {
width: 100%;
height: 100%;
}

body {
width: 100%;
height: 100%;
background-color: #004000;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ec448c), to(#5a94bc));
background: -webkit-linear-gradient(top, #ec448c, #5a94bc);
background: -moz-linear-gradient(top, #ec448c, #5a94bc);
background: -ms-linear-gradient(top, #ec448c, #5a94bc);
background: -o-linear-gradient(top, #ec448c, #5a94bc);
}

.intro {
width: 100%;
height: 100%;
}

Answer 1

你可以做 negative margin技巧:

.intro { 
    height: 200px; 
    width: 200px; 
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -100px;
}

只要所有祖先都没有位置，这将使 div 在视口(viewport)中居中。诀窍是将 div 放置在距左上角 50% 的视口(viewport)宽度和高度处。然后，您只需在上边距和左边距中使用等于 .intro div 高度和宽度一半的负边距(这将使 div 在新的中心点上居中)。

注意:如果调整高度和宽度，则还应调整负边距(例如，如果将宽度更改为 300，则负左边距应为 150 - 宽度的一半)此外，此技巧应作为早于 IE6，所以不用担心。