Question

我正在创建我的第一个网站，而且我是一个新手。我的页脚中的元素有问题。两个div中的一个和图像（div =＆＃34; legal-icon＆＃34;）（div =＆＃34; legal＆＃34;）归入第一个（div id =＆＃34; cpright＆＃34; ），在调整浏览器窗口大小时，直到它们离开容器。我将溢出设置为隐藏但结果是下降的div消失了，并且第一个div（id =＆＃34; cpright＆＃34;）被切成两半。如何使页脚元素响应和正确显示？这是一个小提琴：https://jsfiddle.net/usernamenn/qa4ng6fj/

<!-- footer -->
    <div class="footer">
      <!-- footer info --> 
      <div class="copyright">
        <div id="cpright">
        Copyright &copy 2015 - MyWebsite - 
        </div>
      <div class="legal">
        <ul id="legal_links">
          <li><a href="#">Terms of use</a></li>
          <hr>
          <li><a href="#">Privacy policy</a></li>
        </ul>
        <div class="legal_icon">
          <img id="legal_balance" src="images/balance-scale.png"></div>
        </div>
      </div>
      <!-- end footer info -->
    </div

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -6em;
}

.footer, .push {
height: 6em;
} 

.footer {
    background-color: #3b3b3b;
    border-top: 3px solid grey;
    overflow: hidden;
 }

#cpright {
    float: left;
    font-family: sans-serif;
    font-size: larger;
    letter-spacing: 1px;
    padding-top: 40px;
    padding-left: 100px;
} 

.legal {
    margin: 0;
    padding: 0;
    float: right;
    padding-right: 100px;
}

#legal_links ul {
    width: 100%;
    padding: 0;
    margin: 0 auto;
    text-align: center;
}

#legal_links li {
    display: block;
}

#legal_links li a {
    text-decoration: none;
    color: #fff;
}

#legal_links a:hover {
    color: lightgray;
}

.legal_icon {
    position: relative;
    width: 100%;
    bottom: 65px;
    right: 20px;    
}

#legal_balance {
    width: 35px;
    height: 35px;
}

Answer 1

如果你想要做的是让页脚垂直增长，解决方案就像删除指定的height一样简单。现在你有这个：

.footer, .push {
    height: 6em;
}

这会强制页脚的高度为6em，并且由于其内容占用的空间比它多，所以它会被剪切掉。快速解决方案：remove that rule from your CSS：

.footer, .push {
    /* height: 6em; */
}

但我不知道你是否在其他地方使用.push，所以另一种选择是remove .footer in that particular rule selector：

.push {
    height: 6em;
}

或modify the property so it doesn't have a height of 6em but a minimum height of 6em：

.footer, .push {
    min-height: 6em;
}

虽然最后一个也会影响.push，但您可能不希望这样，所以您可能想要add it as a separate CSS rule：

.push {
    height: 6em;
}

.footer {
    min-height: 6em;
}

推脚中div的问题

1 个答案: