0
私は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">[email protected]</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>
私は初めからやり直すことをお勧めします。コードを大量に削除して、一度に再挿入することをお勧めします。ここでは、あなたのコンテンツの流れに影響を与える多くのものがあります。たとえば、要素をフローティングさせて、通常のフローから取り除きます。あなたはまた、多くのものが相対的に配置されていますが、これは一般的なことではありません。相対オフセットの代わりにマージンとパディングを使用します。 – Quantastical
ありがとう@Quantasticalは私が今やっていることです。私は問題を作り出しているものを見つけました... CVの右側の部分、バイオと写真の部分、なぜ私は理解できません。 – Ric