Html css高度和宽度百分比

我理解，为了使元素的高度达到视口的100%，父元素必须具有固定的高度，或者html和主体的高度必须达到100%

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

该网站是

代码：

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

html{
宽度：100%；
身高：100%；
}
身体{
宽度：100%；
身高：100%；
背景色：#004000；
背景：-webkit梯度（线性，0%0%，0%100%，从（#ec448c）到（#5a94bc））；
背景：-webkit线性梯度（顶部，#ec448c，#5a94bc）；
背景：-莫兹线性梯度（顶部，#ec448c，#5a94bc）；
背景：-ms线性梯度（顶部，#ec448c，#5a94bc）；
背景：-o-线性梯度（顶部，#ec448c，#5a94bc）；
}
.介绍{
宽度：100%；
身高：100%；
}

固定背景：不要将渐变应用于身体，而是使用另一个固定元素

div#mybackground {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
  background: ..gradient..;
}

现在，在你的网站上你可以 .介绍文字{ 身高：100%； } 然后使用JavaScript将.intro_文本的行高设置为与.intro_文本的行高相同的值，并将其添加到h3中：

.intro_text h3 {
  position:relative;
  top: -90%;
}

top-90%的更好替代方案是将top设置为高度的负值。简介文本

您可以执行以下操作：

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

---

注意：如果你调整高度和宽度，你也应该调整负边距（例如，如果你将宽度更改为300，负左边距应该是150-宽度的一半），同样，这个技巧应该可以追溯到IE6，所以不用担心。

我对你的问题有点困惑，但如果你不想重复你的背景，你可以试试

---

body{background:url（your_image.jpg）top无重复；背景位置：fixed；}

将背景设置为

html

并向其添加

溢出：隐藏
。
然后在
正文中添加一个
溢出：auto

背景在哪里？
.intro { 
    height: 200px; 
    width: 200px; 
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -100px;
}