-1

我正在做一些作業。我無法將頁腳正確地放在頁面的底部，無論我填入每個頁面多少......任何人都可以給我一個指針？包裝div的寬度和高度必須設置爲預設。我希望頁腳坐在頁面的底部。應填寫正文內容，頁腳應位於頁面底部。頂部應該是50px到身體的底部。HTML/CSS放置問題

body 
{ 
    background-color:   #ffffff; 
} 
.wrapper 
{ 
    width:       960px; 
    height:       700px; 
    background-color:    #D3D1C2; 
    margin-left:     auto; 
    margin-right:     auto; 
    margin-top:      20px; 
} 
.masthead 
{ 
    height:       150px; 
    width:       960px; 
    background-color:    #000; 
} 

#nav-wrapper 
{ 
    width:       960px; 
    margin:       0 auto; 
    padding:      20px 0; 
    background:      #3D3331; 
} 
ul#nav 
{ 
    font-family:      Verdana; 
    font-size:      14px; 
    list-style:      none; 
    margin:       0 auto; 
    padding:      0; 
    width:       960px; 
    overflow:      auto; 
    } 
ul#nav li 
    { 
    display:      inline; 
    } 
    ul#nav li a 
    { 
    text-decoration:    none; 
    display:       block; 
    padding:      5px 21px; 
    background:      #5F3222; 
    color:       #eee; 
    float:       left; 
    text-align:      center; 
    border-top:      2px solid #815444; 
    border-right:     2px solid #3d1000; 
    border-bottom:     2px solid #3d1000; 
    border-left:     2px solid #815444; 
} 
ul#nav li a:hover 
{ 
    background:      #a37666; 
    color:       #000; 
    border-top:      2px solid #815444; 
    border-right:     2px solid #c59888; 
    border-bottom:     2px solid #c59888; 
    border-left:     2px solid #815444; 
} 
.body 
{ 


} 
.footer 
    { 
    clear:       both; 
    width:       960px; 
    height:       50px; 
    background:      #000; 
     margin-bottom:     10px; 
} 
h1 
{ 
    text-align:      center; 
}

HTML：

<html> 
<head> 
    <!--I am using TextWrangler to do my html css editing on my Mac--> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'  type='text/css'> 
<title> 
    KG Doors 
</title> 
</head> 
<body> 
    <div class="wrapper"> 
    <div class="masthead"> 

    </div><!--end the masthead div --> 
    <div id="nav-wrapper"> 
    <ul id="nav"> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="about.html">Services</a></li> 
     <li><a href="contact.html">Contact</a></li> 
    </ul> 
</div> 
<div class="body"> 
    <br/>KG Doors offers replacement of: 
    <br/>- Springs 
    <br/>- Cables 
    <br/>- Openers 
    <br/>- Keypads 
    <br/>- Transmitters 
    <br/>- Garage Doors 
    <br/>- Sections 

</div><!--end the body div --> 
<div class="footer"> 

</div><!--end the footer div --> 
</div><!--end the wrapper div --> 

</body> 
</html>

來源

2012-01-14 YoungGuy

你能澄清你的意思嗎？ html會有幫助 – mcallinder 2012-01-14 04:49:20

對不起，我正在編輯HTML ...沒有正確地獲取所有格式。 – YoungGuy 2012-01-14 04:51:32

看看這個：[http://ryanfait.com/sticky-footer/](http://ryanfait.com/sticky-footer/） – Avinash 2012-01-16 04:15:19

讓我們來創建a sticky footer！

我們會與一些漂亮乾淨的標記開始了：

<header> 
    <h1>A beautiful header!</h1> 
</header> 

<section id="pagebody"> 
    <p>My long page body...</p> 
    <p>My long page body...</p> 
    <p>My long page body...</p> 
    <p>My long page body...</p> 
    <p>My long page body...</p> 
    <p>My long page body...</p> 
    <p>My long page body...</p> 
    <p>My long page body...</p> 
</section> 

<footer> 
    <p>A beautiful footer!</p> 
</footer>

...我們將添加一些基本知識，我們的CSS：

body, h1, footer p { margin: 0 } 

header, footer { 
    color: #333; 
    vertical-align: middle; 
} 

header { 
    height: 80px; 
    padding-left: 20px; 
    line-height: 80px; 
    background: #d2006b; 
} 
footer { 
    height: 40px; 
    line-height: 40px; 
    text-align: center; 
    background: #FFE700; 
} 

#pagebody { 
    padding: 20px; 
    background: #00A67C; 
} 

#pagebody p { margin: 160px 0 } 

#pagebody p:first-child { margin-top: 0 } 
#pagebody p:last-child { margin-bottom: 0 }

，實現了「粘」尾（即堅持到頁面底部的頁腳），設置在<html>和<body>元素height:100%;。這將防止元件從到的它的內容的大小垂直地收縮：

html, body { height:100% }

然後設置一個的border-boxbox-sizing（這被CSS3所以添加期望的供應商前綴）和min-height的100%的#pagebody元件上（主頁容器）：

#pagebody { 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    min-height:100%; 
    padding: 20px; 
    background: #00A67C; 
}

現在頁面的主容器具有最小值頁腳高度應該低於視口（因此您必須滾動才能看到它）。

接着，#pagebody元件上，添加一個頂部填充等於所述報頭（80px）和底部填充等於頁腳（40像素）的高度的高度：

#pagebody { 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    min-height: 100%; 
    padding: 100px 20px 60px; /* I already had a 20px padding so I just added 20px to 80px for the new top padding, and added 20px to 40px for the new bottom padding. */ 
    background: #00A67C; 
}

接着，#pagebody元件上，添加一個負上邊距等於的高度210，以及負底部邊緣等於頁腳的高度：

#pagebody { 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    min-height:100%; 
    padding: 100px 20px 60px; 
    margin: -80px 0 -40px; 
    background: #00A67C; 
}

然後加入position:relative;到header元件所以它是不下方#pagebody：

header { 
    position: relative; 
}

我們完成了！嘗試取出the example中的一些段落。頁腳仍然粘在頁面的底部！ :)
我希望這是有幫助的！

-Daniel

來源

2012-01-14 08:25:18

通過更換您的頁腳類，

.footer 
    { 
    clear:       both; 
    width:       960px; 
    height:       50px; 
    background:      #000; 
    margin-bottom:     10px; 
    position:       absolute; 
    bottom:       0px; 
}

來源

2012-01-14 04:53:33 Avinash

檢查了這一點，它應該是有用的：http://www.alistapart.com/articles/footers/

此外，您可以嘗試使用min-height:100%;在你的身體課上。

來源

2012-01-14 05:04:35 mcallinder

HTML/CSS放置問題

回答

讓我們來創建a sticky footer！

相關問題