html - 推送页脚中的 div 问题

Question

我正在创建我的第一个网站，我是一个新手。我的页脚中的元素有问题。两个 div 之一和图像 (div="legal-icon") (div="legal") 在第一个 (div id="cpright") 下，同时调整浏览器窗口的大小，直到它们离开容器.我将溢出设置为隐藏，但结果是下降的 div 消失了，第一个 div (id="cpright") 被切成两半。如何使页脚元素响应并正确显示？这是一个 js fiddle :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

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

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