Question

这是我的页脚html5代码：

<footer>
  <div class="footer">
    <nav>
      <ul class="nav-list1">
        <li><img src="img/article-logo.png"  alt="img"/></li>
        <li>ARTICLES</li>
        <li>BLOG</li>
        <li>COLUMN</li>
        <li>TOPICS</li>
      </ul>
      <ul class="nav-list2">
        <li>ABOUT</li>
        <li>AUTHOURS</li>
        <li>MASTHEAD</li>
        <li>CONTRIBUTE</li>
        <li>STYLEGUIDE</li>
        <li>CONTACT</li>
        <li>SPONSORSHIPS</li>
      </ul>
    </nav>
    <hr class="hr-style" />
    <section class="clearfix">
      <div class="footer-column1"> <img src="img/dot-net-ad.jpg" class="footer-image" alt="dot"/>
        <p class="footer-title">.NET Training</p>
        <p class="footer-pgf">If you have a .NET question on a topic that 's not covered by other more specific forums.</p>
        <p><a class="footer-link" href="#">ask here. ></a></p>
      </div>
      <div class="footer-column2"> <img src="img/shopify-expert-ad.jpg" class="footer-image" alt="expert"/>
        <p class="footer-title">Shopify Expert</p>
        <p class="footer-pgf">Unique custom made Shopify theme and tweaks.</p>
        <p><a class="footer-link" href="#">click to view</a></p>
      </div>
    </section>
    <hr class="hr-style" />
    <p class="copyright">Copyright &copy; 2013 Dot Net How</p>
  </div>
</footer>

这是我的css：

nav 
{
    text-align:center;  
}
.nav-list1 li 
{
    display:inline; 
    font-size:12px;
    font-weight:700;
    padding:15px;
    letter-spacing: 0.2pt;
}
.nav-list2 li 
{
    display:inline; 
    font-size:11px;
    font-weight:800;
    padding:15px;
    letter-spacing: 0.2pt;
}
.footer 
{
    background-image : url('../img/footer-bg.jpg');
    padding:15px;
    bottom : 0;
    height : auto;
}
section
{
    margin-left : -15px;
    margin-right : -15px;
}
.footer-column1,.footer-column2
{
    float:left;
    padding-bottom: 15px;
}
img {
    border : 0;
    vertical-align : middle;
}
.footer-image {
    float : left;
    padding-right : 13px;
}
.footer-title {
    font-weight: 700;
    font-size: 12px;
}
.footer-pgf {
    font-size : 11px;
}
.footer-link {
    font-size : 11px;
    font-weight : 600;
}
.copyright {
    font-size : 12px;
    font-weight : 500;
    text-align:center;
}
.clearfix:after 
{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.column4-pgf 
{
    font-size:11px; 
}
.well {
    background-color : #f5f5f5;
    border : #e3e3e3 solid 1px;
    border-radius : 4px;
    box-shadow : 0 1px 1px rgba(0, 0, 0, 0.05) inset;
    margin-bottom : 20px;
    min-height : 20px;
    padding : 19px;
}
.footer-column2 
{
    margin-left: 45px !important;
}
@media (min-width:992px) 
{
    .column-1,.column-2, .column-3, .column-4, .footer-column1, .footer-column2{
    min-height : 1px;
    padding-left : 15px;
    padding-right : 15px;
    position : relative;
}}

@media (min-width: 992px)
{
    .footer-column1, .footer-column2
{
    width: 47%;
    margin-left: 15px;
}
}

的jsfiddle：

http://jsfiddle.net/fj1vckac/

调整窗口大小时，页脚部分位于底部，并与页面的剩余部分分开。

我可能知道如何解决这个问题，我不知道确切的css样式。

有人能帮助我吗？

Answer 1

你可以再增加一个课程＆＃39; footerWidth＆＃39;并根据需要增加宽度。

section.footerWidth{
    width: 960px;
    margin: 0 auto
}

<强> Link

我希望它对你有用，你也可以添加你的包装类。

Answer 2

看看这个JS我编辑的家伙我希望它有帮助..... http://jsfiddle.net/fj1vckac/5/ 页脚必须在包装内..

<div id="wrapper">
   <footer>
 <div>

调整窗口大小时的页脚问题

2 个答案: