-2
私はfooterと同じ高さのbodyタグにmargin-bottomとmin-heightを試しました。 .contactというフッターコンテナは、その上のdiv。store-itemsを尊重していません。私はきれいな修正を探していますが、最終的にはフレックスボックスについて学びますが、私の戦略には単純なエラーがあることが疑わしいです。おかげで、ここのコードです： - すべてのこの絶対的および相対的な位置決めが不要K. Daniekが書いたように相対的に高さの固定された高さのフッターがその前の絶対divをカバーしています。
/*=================
Start of Rules after reset
===================*/
body{
font-family: Open Sans;
margin-bottom: 70px;
min-height: 500px;
}
/*
================================
Body
================================
*/
.store-items {
margin-left: 20px;
margin-right: 20px;
width:900px;
max-height: 900px;
border: solid 1px;
position: absolute;
padding: 30px;
padding-left: 65px;
display: block;
}
.store-items .item-1-3 {
display: inline-block;
width:30%;
margin-right: 20px;
margin-bottom: 20px;
height:300px;
border: solid 1px;
background-color:#333333;
position: relative;
}
.store-items .item-1-3 img{
height: 190px;
width: 150px;
position: relative;
width:100%;
}
.store-items .item-1-3 h3{
text-align: center;
color:white;
position: relative;
top: 7px;
}
.store-items .item-1-3 p{
position: relative;
left:170px;
top:15px;
border:solid 1px black;
width:40px;
background-color: white;
z-index: 1;
}
/*
================================
Footer
================================
*/
.contact {
position: relative;
width:100%;
left:0;
bottom:0;
height:70px;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>The Viking Store</title>
<link rel="stylesheet" type="text/css" href="vkhmp.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
</head>
<body>
<header>
<div class="navbar">
<a href="vikingstore.com" class="vks">Viking Store</a>
<div class="cart">
<a href="vikingstore.com"><img src="resources/noun_355_cc.svg" alt="shopping cart" style="width:32px; height:32px;"></a>
<a href="vikingstore.com/cart">Your Cart</a>
</div>
</div>
<div class="header-image">
<a href="vikingstore.com"><img src="resources/viking_ship_background_medium.jpg" alt="viking ship background"></a>
<h1>The Viking Store</h1>
</div>
<div>
<div class="tagline1">
<p>The Best Viking Gear on the Whole Web</p>
</div>
<div class="tagline2">
<p>Choose from among our lineup of fine axes below</p>
</div>
</div>
</header>
<div class="store-items">
<div class="item-1-3">
<h3>The Silent Night</h3>
<p>$200</p>
<img src="resources/axe_silent_night_small.jpg" alt="The Silent Night">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--
--><div class="item-1-3">
<h3>The Dainty Daisy</h3>
<p>$100</p>
<img src="resources/axe_dainty_daisy_small.jpg" alt="The Dainty Daisy">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--
--><div class="item-1-3">
<h3>Double Trouble</h3>
<p>$340</p>
<img src="resources/axe_double_trouble_small.jpg" alt="Double trouble">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--
--><div class="item-1-3">
<h3>Whispering Wind</h3>
<p>$225</p>
<img src="resources/axe_whispering_wind_small.jpg" alt="Whispering Wind">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--
--><div class="item-1-3">
<h3>The Cunning Cutter</h3>
<p>$200</p>
<img src="resources/axe_cunning_cutter_small.jpg" alt="The Cunning Cutter">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--
--><div class="item-1-3">
<h3>The Kingmaker</h3>
<p>$400</p>
<img src="resources/axe_kingmaker_small.jpg" alt="The Kingmaker">
<div>
<input type="submit" value="Add to Cart">
</div>
</div>
</div>
<div class="pagination"></div>
</body>
<footer>
<div class="contact">
<h2>Contact</h2>
<img src="resources/noun_14614_cc.svg" alt="horn call" style="height:32px; width:32px;">
1-000-000-000
<img src="resources/noun_631009_cc.svg" alt="scroll email" style="height:32px; width:32px;">
<h2>[email protected]</h2>
</div>
</footer>
</html>
：http://codepen.io/anon/pen/BLJxyk
はここで変更CSSです。 –