我是HTML和CSS的新手，我开始遇到我的第一个困境。 我正在创建一个假的CV页面，但有一个问题：基本上我不明白为什么我的身体和HTML和容器比我的内容短。我希望他们到达文档的底部，但我无法做到。我已经尝试了所有的东西，但我想这几个div上有很多错误。
html {
height: 100%;
}
body {
font-family: Arial;
background-color: yellow;
margin: 0;
height: 100%;
}
#container {
min-height: 100%;
}
#header {
background-color: black;
height: 10%;
width: 100%;
position: fixed;
left: 0px;
top: 0px;
right: 0px;
z-index: 1;
}
#mail {
color: black;
font-size: 3em;
top: 100px;
right: 50px;
position: absolute;
top: 50px;
right: 20px;
}
#phone {
color: gray;
font-size: 3em;
position: absolute;
top: 110px;
right: 20px;
}
.left {
float: left;
position: absolute;
left: 0px;
top: 40px;
width: 50%;
}
.right {
float: right;
position: absolute;
right: 0px;
top: 40px;
width: 50%;
}
#name {
color: black;
font-size: 3em;
top: 1000px;
position: absolute;
left: 20px;
top: 50px;
}
#surname {
color: gray;
font-size: 3em;
position: absolute;
top: 110px;
left: 20px;
}
hr {
position: relative;
top: 300px;
height: 1px;
border: 0;
border-top: 1px solid #d3d3d3;
}
#block-job {
position: relative;
top: 350px;
width: 30%;
left: 380px;
border-right: 1px solid #d3d3d3;
}
.single-block {
margin-bottom: 30px;
}
.title {
font-size: 1.5em;
}
.link {
color: blue;
position: relative;
top: 10px;
}
.description {
position: relative;
top: 10px;
}
#name:hover,
#mail:hover {
color: blue;
}
.year {
position: relative;
right: 80px;
top: 25px;
}
#block-bio {
float: left;
position: absolute;
width: 30%;
top: 385px;
right: 320px;
}
#about {
font-size: 1.5em;
margin-bottom: 40px;
}
img {
width: 555px;
margin-bottom: 40px;
}
#footer {
background-color: red;
height: 10%;
width: 100%;
}<div id="container">
<div id="header"></div>
<div class="left">
<div id="contact">
<p id="mail">steven@steven.com</p>
<p id="phone">(44)512345678</p>
</div>
</div>
<div class="right">
<div id="logo">
<p id="name">STEVEN</p>
<p id="surname">STEVENSON</p>
</div>
</div>
<div style="clear: both"></div>
<hr>
<div id="block-job">
<div class="single-block">
<span class="year">2016</span>
<div class="title">Artnet, New York</div>
<span class="link">artnet.com</span>
<div class="description">
<p>Artnet.com is an art market website. It is operated by Artnet Worldwide Corporation, which has headquarters in New York, in the United States</p>
</div>
</div>
<div class="single-block">
<span class="year">2016</span>
<div class="title">Artsy, New York</div>
<span class="link">artsy.net</span>
<div class="description">
<p>Artsy is the online resource for art collecting and education. Discover, learn about, and buy art you'll love, featuring fine art, design, and photography</p>
</div>
</div>
<div class="single-block">
<span class="year">2014</span>
<div class="title">Artsy, New York</div>
<span class="link">artsy.net</span>
<div class="description">
<p>Artsy is the online resource for art collecting and education. Discover, learn about, and buy art you'll love, featuring fine art, design, and photography</p>
</div>
</div>
<div class="single-block">
<span class="year">2010</span>
<div class="title">Artnet, New York</div>
<span class="link">artsy.net</span>
<div class="description">
<p>Artnet.com is an art market website. It is operated by Artnet Worldwide Corporation, which has headquarters in New York, in the United States</p>
</div>
</div>
<div class="single-block">
<span class="year">2008</span>
<div class="title">Artsy, New York</div>
<span class="link">artsy.net</span>
<div class="description">
<p>Artsy is the online resource for art collecting and education. Discover, learn about, and buy art you'll love, featuring fine art, design, and photography</p>
</div>
</div>
<div class="single-block">
<span class="year">2006</span>
<div class="title">Artsy, New York</div>
<span class="link">artsy.net</span>
<div class="description">
<p>Artsy is the online resource for art collecting and education. Discover, learn about, and buy art you'll love, featuring fine art, design, and photography</p>
</div>
</div>
<div class="single-block">
<span class="year">2006</span>
<div class="title">Artsy, New York</div>
<span class="link">artsy.net</span>
<div class="description">
<p>Artsy is the online resource for art collecting and education. Discover, learn about, and buy art you'll love, featuring fine art, design, and photography</p>
</div>
</div>
<div class="single-block">
<span class="year">2006</span>
<div class="title">Artsy, New York</div>
<span class="link">artsy.net</span>
<div class="description">
<p>Artsy is the online resource for art collecting and education. Discover, learn about, and buy art you'll love, featuring fine art, design, and photography</p>
</div>
</div>
</div>
<div id="block-bio">
<div id="photo">
<img src="http://www.davidejackson.com/blog/wp-content/uploads/2014/09/gary_clark_jr_summerfest_2014_milwaukee_album_packaging_music_photography_live_show_warner_brothers_records_23.jpg" />
</div>
<div id="inner-bio">
<div id="about">About Me</div>
<div id="bio">
<p>James Newell Osterberg, Jr., better known by the stage name Iggy Pop (/ˈɪɡi pɒp/ born April 21, 1947), is an American singer-songwriter, musician and actor. He is the vocalist of influential proto-punk band The Stooges, who reunited in 2003, and
has been known for his outrageous and unpredictable stage antics. Pop's music has encompassed a number of styles over the course of his career, including garage rock, hard rock, new wave, jazz, art rock and blues. Though his popularity has fluctuated
through the years, many of Pop's songs have become well-known, including "Lust for Life", "The Passenger", "Real Wild Child", "Candy" (a duet with Kate Pierson of The B-52's), "China Girl", "Nightclubbing", "Search and Destroy" and "I Wanna
Be Your Dog". In 2010, The Stooges were inducted into the Rock and Roll Hall of Fame.</p>
</div>
</div>
</div>
<div id="footer">Back to top</div>
</div>
</body>
</html>
答案 0 :(得分：0)
要应用样式，您需要将CSS文件包含在HTML文件中。
您必须包含在HTML文件中的任何内容都包含在<head>部分中。您可以使用<link>。
例如：<link href="file_name.css" rel="stylesheet" type="text/css">。
我建议您查看http://www.w3schools.com/html/html5_intro.asp以帮助您入门。他们有非常简洁的教程，他们很好地解释了一切。
我希望你能找到你需要的东西！