Question

我在我的身体标签上尝试了与底部高度相同的边距和最小高度。名为.contact的页脚容器不尊重它上面的div .store-items。我正在寻找一个干净的解决方案，最终我将学习弹性盒子，但我怀疑我的策略中有一个简单的错误。谢谢，这是代码：

/*=================
    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>contact@vikingstore.com</h2>
    </div>  
</footer>




</html>

Answer 1

正如K. Daniek写的那样，你在页脚之前关闭了body标签，除此之外，还有很多不必要的代码 - 不需要所有这些绝对和相对定位 - 使用边距创建距离和将位置设置保留为默认值。

这是一个codepen：http://codepen.io/anon/pen/BLJxyk

这里是改变的CSS：

body {
  font-family: Open Sans;
  margin-bottom: 70px;
  min-height: 500px;
}

.store-items {
  margin-left: 20px;
  margin-right: 20px;
  width: 900px;
  max-height: 900px;
  border: solid 1px;
  padding: 30px;
  padding-left: 65px;
}

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

.store-items .item-1-3 h3 {
  text-align: center;
  color: white;
  margin-top: 7px;
}

.store-items .item-1-3 p {
  left: 170px;
  margin-top: 15px;
  border: solid 1px black;
  width: 40px;
  background-color: white;
}

.contact {
  height: 70px;
  display: block;
}

相对定位的固定高度页脚覆盖在它之前的绝对div。

1 个答案: