在推脚注divs问题

我创建我的第一个网站，我是一个新手。我在脚注中遇到问题。其中一个div和图像（div =“legal-icon”）（div =“legal”）位于第一个（div id =“cpright”）之下，同时调整浏览器窗口大小，直到它们离开容器。我设置了隐藏溢出，但结果是下降的div消失了，并且第一个div（id =“cpright”）被减半。如何使页脚元素响应并正确显示？这里有一个JS提琴：https://jsfiddle.net/usernamenn/qa4ng6fj/在推脚注divs问题

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

来源

2015-09-21 Alessio Pantiaco

尝试使用更常见的做法。例如：使用页脚元素而不是div的...它使读取和查找问题变得更容易。另外：一定要知道你什么时候需要使用类，什么时候使用id。至于问题，它在CSS中。所以发布你的CSS（而不只是在JSFiddle中）会更好。注意：您使用的是重要的，这是不好的做法，尝试寻找替代品。最后但并非最不重要的：保持名称清洁。尽量不要像cpright那样缩短它，当版权几乎相同但更容易阅读和理解时。 –

好的。我使用了较短的名字，因为我在教程中看到了它。你的意思是使用-footer以哪种方式？我必须删除所有div并将所有内容放入页脚元素中？ –

你想让这两个元素留在彼此之外吗？或者您是否希望页脚高度调整并将条款放置在版权下方？如果是后者，你希望它们在页面上居中对齐吗？ – jazZRo

如果你想要做的就是让页脚垂直增长，解决办法是那么容易，因为删除指定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; 
}

来源

2015-09-21 18:51:32

主！你快速解决了我的问题！ –

在推脚注divs问题

回答

相关问题