我有一个线性渐变的背景图像，它在内容高度之前结束。
我已经尝试了很多方法来解决此问题，例如min-height: 100%以及html和about-body div的各种位置。如何使html高度适合所有内容？
html {
width: 100%;
min-height: 100%;
overflow-x: hidden;
overflow-y: scroll hidden;
background-image: linear-gradient(#d580ff, #ffcc99);
}
/* Nav bar */
#pageNavBar {
position: relative;
margin: 0 0 0 0;
width: 100%;
}
#header-text {
position: absolute;
width: 100%;
top: 28vw;
text-align: center;
font-family: Gabriola, Arial, sans serif;
font-size: 10vw;
color: white;
transition: all 0.3s ease-in-out;
}
#header-text:hover {
color: rgba(255,255,255,0.8);
text-shadow: 0 0 10px #FFFFFF;
}
#nav-links {
position: absolute;
width: 90%;
height: 3.5vw;
left: 5%;
top: 2vw;
font-family: Gabriola, Arial, sans serif;
font-size: 2vw;
color: black;
text-align: center;
font-weight: bold;
}
.nav-link {
text-decoration: none;
font-family: Gabriola, Arial, sans serif;
font-size: 2vw;
color: black;
margin: 0 5% 0 5%;
transition: all 0.3s ease-in-out;
}
.nav-link:hover {
color: white;
text-shadow: 0 0 10px white;
}
/* About */
#about-body {
clear: both;
position: relative;
top: 8vw;
width: 70%;
margin: 0 15% 0 15%;
border: 0.3vw solid rgba(255,255,255,0.6);
border-radius: 5px;
-webkit-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
-moz-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
}
#about-body-header {
position: relative;
width: 100%;
top: 1.5vw;
text-align: center;
font-family: Gabriola, Arial, sans serif;
font-size: 5vw;
color: white;
transition: all 0.3s ease-in-out;
}
#about-body-header:hover {
text-shadow: 0 0 10px white;
}
#aboutImg {
position: relative;
width: 80%;
margin: 3% 10% 5% 10%;
border: 0.15vw solid rgba(255,255,255,0.6);
box-shadow: 0vw 0.5vw 0.75vw gray;
}
#aboutTxt {
position: relative;
font-family: Tahoma;
font-size: 1.25vw;
margin: 0 10% 5% 10%;
}<body>
<!-- Navigation -->
<div id="nav-links">
<a href="/home" class="nav-link">
Home
</a>
<a href="/about" class="nav-link">
About
</a>
<a href="/projects" class="nav-link">
Projects
</a>
<a href="/gallery" class="nav-link">
Gallery
</a>
<a href="/social" class="nav-link">
Social
</a>
<a href="/contact" class="nav-link">
Contact
</a>
</div>
<!-- Main page body below nav bars -->
<div id="about-body">
<div id="about-body-header">About Me</div>
<img src="/images/image.png" id="aboutImg" />
<p id="aboutTxt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</body>
答案 0 :(得分：1)
您在代码中做了很多奇怪的事情（旧的明确修复方法，使用top表示相对定位的元素，使用vw代替vh进行顶部对齐，等等）
使用#about-body替换top margin-top属性可以解决该问题。
按照规范：https://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins
，看起来在使用top时，包装元素的高度没有变化（而是使容器溢出）。
我不建议将top用于相对定位的元素，因为这会导致行为混乱。
html {
width: 100%;
min-height: 100%;
overflow-x: hidden;
overflow-y: scroll hidden;
background-image: linear-gradient(#d580ff, #ffcc99);
}
/* Nav bar */
#pageNavBar {
position: relative;
margin: 0 0 0 0;
width: 100%;
}
#header-text {
position: absolute;
width: 100%;
top: 28vw;
text-align: center;
font-family: Gabriola, Arial, sans serif;
font-size: 10vw;
color: white;
transition: all 0.3s ease-in-out;
}
#header-text:hover {
color: rgba(255,255,255,0.8);
text-shadow: 0 0 10px #FFFFFF;
}
#nav-links {
position: absolute;
width: 90%;
height: 3.5vw;
left: 5%;
top: 2vw;
font-family: Gabriola, Arial, sans serif;
font-size: 2vw;
color: black;
text-align: center;
font-weight: bold;
}
.nav-link {
text-decoration: none;
font-family: Gabriola, Arial, sans serif;
font-size: 2vw;
color: black;
margin: 0 5% 0 5%;
transition: all 0.3s ease-in-out;
}
.nav-link:hover {
color: white;
text-shadow: 0 0 10px white;
}
/* About */
#about-body {
clear: both;
position: relative;
/* <--- THIS WAS CHANGED (top removed) */
width: 70%;
margin: 8vw 15% 0 15%; /* <--- THIS WAS CHANGED */
border: 0.3vw solid rgba(255,255,255,0.6);
border-radius: 5px;
-webkit-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
-moz-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
}
#about-body-header {
position: relative;
width: 100%;
top: 1.5vw;
text-align: center;
font-family: Gabriola, Arial, sans serif;
font-size: 5vw;
color: white;
transition: all 0.3s ease-in-out;
}
#about-body-header:hover {
text-shadow: 0 0 10px white;
}
#aboutImg {
position: relative;
width: 80%;
margin: 3% 10% 5% 10%;
border: 0.15vw solid rgba(255,255,255,0.6);
box-shadow: 0vw 0.5vw 0.75vw gray;
}
#aboutTxt {
position: relative;
font-family: Tahoma;
font-size: 1.25vw;
margin: 0 10% 5% 10%;
}<body>
<!-- Navigation -->
<div id="nav-links">
<a href="/home" class="nav-link">
Home
</a>
<a href="/about" class="nav-link">
About
</a>
<a href="/projects" class="nav-link">
Projects
</a>
<a href="/gallery" class="nav-link">
Gallery
</a>
<a href="/social" class="nav-link">
Social
</a>
<a href="/contact" class="nav-link">
Contact
</a>
</div>
<!-- Main page body below nav bars -->
<div id="about-body">
<div id="about-body-header">About Me</div>
<img src="/images/image.png" id="aboutImg" />
<p id="aboutTxt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</body>