HTML5和Css3 - 页脚重叠 - - 响应式网页设计

我目前使用响应式网页设计技术来设计一个网站，以便在从手持设备访问时看起来也不错。我已经使用Bootstrap来定位元素和一些用于定制导航栏，页脚等的自定义CSS。大多数元素包括导航栏工作正常，除了我的页脚在收缩时与其他元素保持重叠的事实垂直网页。看看下面的代码。任何帮助将不胜感激。谢谢。HTML5和Css3 - 页脚重叠 - - 响应式网页设计

html 
{  
    margin: 1%; 
    padding: 0; 
} 
html, body 
{ 
    height: 95%; 
} 

#body 
{ 
    height: 82%; 
} 
header, footer, nav, section 
{ 
    display: block; 
} 

footer 
{ 
    width: 100%; 
    list-style: inline-block; 
    position: static; 
    white-space: nowrap; 
    border-radius: 4px; 
    padding-top: 2px; 
    padding-left: 5px; 
    vertical-align: baseline; 
} 

footer p 
{ 
    padding: 0.2em; 
    color: White; 
} 
#image 
{ 
    padding: 0.2em; 
} 

.nav 
{ 
    position: relative; 
    margin: 20px 0; 
    width: 100%; 
    border-radius: 4px; 
} 
.nav ul 
{ 
    margin: 0; 
    padding: 0; 
} 
.nav li 
{ 
    margin: 10px 5px 10px 0; 
    padding: 0; 
    display: inline-block; 
    list-style: none; 
} 
.nav a 
{ 
    padding: 3px 12px; 
    text-decoration: none; 
    color: white; 
    line-height: 100%; 
} 
.nav a:hover 
{ 
    border: 1px solid #acdd4a;  
    font-weight: normal; 
    color: #ffffff; 
    text-decoration: none; 
} 
.nav a:active 
{ 
    border: 1px solid #acdd4a; 

    font-weight: normal; 
    color: #ffffff; 
} 
.nav .current a 
{ 
    border: 1px solid #acdd4a; 
    color: #fff; 
    border-radius: 5px; 
}

下面是我的标记

<!DOCTYPE html> 
<html lang="en"> 
<head>  
</head> 
<body> 
    <header> 
     <div class="row-fluid"> 
      <div class="span2"> 
       <p> 
        Title of webpage 
       </p> 
      </div> 
      <div class="span8"> 
      </div> 
      <div id="image" class="span2"> 

      </div> 
     </div> 
    </header> 
    <nav class="nav"> 
      <ul> 
       <li>@Html.ActionLink("Home", "Index", "Home")</li> 
       <li><a href="#">Admin</a></li> 
       <li>@Html.ActionLink("Help", "Contact", "Home")</li> 
      </ul>  
    </nav> 
    <div class="row-fluid" id="body"> 
     <section> 
      @RenderBody() 
     </section> 
    </div> 
    <footer> 
     <div class="row-fluid"> 
      <div class="span4"> 
       <p>@User.Identity.Name</p> 
      </div> 
      <div class="span5"> 
      </div> 
      <div class="span3"> 
       <p> 
        &copy; @DateTime.Now.Year</p> 
      </div> 
     </div> 
    </footer>  
</body> 
</html>

来源

2013-03-26 Ren

试试这个：

CSS：

/* Sticky footer styles 
    -------------------------------------------------- */ 

    html, 
    body { 
    height: 100%; 
    /* The html and body elements cannot have any padding or margin. */ 
    } 

    /* Wrapper for page content to push down footer */ 
    #wrap { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    /* Negative indent footer by it's height */ 
    margin: 0 auto -60px; 
    } 

    /* Set the fixed height of the footer here */ 
    #push, 
    #footer { 
    height: 60px; 
    } 
    #footer { 
    background-color: #f5f5f5; 
    } 

    /* Lastly, apply responsive CSS fixes as necessary */ 
    @media (max-width: 767px) { 
    #footer { 
     margin-left: -20px; 
     margin-right: -20px; 
     padding-left: 20px; 
     padding-right: 20px; 
    } 
    }

HTML：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>@ViewBag.Title</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    @Styles.Render("~/Content/bootstrap") 
</head> 
<body> 
    <div id="wrap"> 
     <div class="navbar navbar-fixed-top"> 
      <div class="navbar-inner"> 
       <div class="container"> 
        <nav class="nav-collapse collapse"> 
         <ul class="nav"> 
      <li>@Html.ActionLink("Home", "Index", "Home")</li> 
      <li><a href="#">Admin</a></li> 
      <li>@Html.ActionLink("Help", "Contact", "Home")</li> 
         </ul> 
        </nav> 
       </div> 
      </div> 
      <div class="container-fluid"> 
       <section> 
        @RenderBody() 
       </section> 
      </div> 
     </div> 
     <div id="push"></div> 
    </div> 
    <div id="footer"> 
     <div class="clearfix"> 
     <div class="pull-left"> 
      <p>@User.Identity.Name</p> 
     </div> 
     <div class="pull-right"> 
      <p>&copy; @DateTime.Now.Year</p> 
     </div> 
     </div> 
    </div> 
    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
</body> 
</html>

Ref：[http://twitter.github.com/bootstrap/examples/sticky-footer.html][Twitter Bootstrap Sticky Footer]

来源

2013-03-26 11:33:18

谢谢。但是，这使得页脚立即在我的内容之后。我需要页面底部的页脚。我的代码在这方面工作正常，但重叠失败......请提供任何建议？ – Ren 2013-03-26 12:52:24

你用过上面提到的css吗？它会将页脚粘贴在页面的底部。使用与正确的元素ID相同的html结构，主要是#wrap，#push和#footer。 – 2013-03-28 13:46:05

HTML5和Css3 - 页脚重叠 - - 响应式网页设计

回答

相关问题