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 - 頁腳重疊 - - 響應式網頁設計

回答

相關問題