頁腳在頁面的底部，如果包裝是絕對定位

-1

<body> 
    <div class='header'> 
    </div> 
    <div class='wrapper'> 
     **** 
    </div> 
    <div class='footer'> 
    </div> 
</body>

和這樣的CSS：

body, html{ 
    background-color: #5669e1; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    height: 100%; 
} 
.header { 
    position: relative; 
    z-index: 10010; 
    width:100%; 
    height: 226px; 
    background: url(../images/header.png) no-repeat center top; 
} 
.wrapper{ 
    position: absolute; 
    width: 1200px; 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    display: table; 
    left: 50%; 
    margin: -100px 0 0 -600px; 
    z-index: 10000; 
    padding-bottom: 176px; 
    background-color: #fff; 
    -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75); 
    -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75); 
    box-shadow:   0px 0px 20px rgba(0, 0, 0, 0.75); 
} 
.footer{ 
    height: 176px; 
    background: url(../images/footer.png) no-repeat center; 
    position: relative; 
    height: 176px; 
    margin-top: -176px; 
}

，但它是頭之後，當我的包裝是不是絕對它在不同的頁面上顯示也很奇怪。我怎麼能把它放在底部，在176px的包裝？

來源

2013-10-16 brabertaser19

嘗試添加'位置：absolute'和'底部：0;'到您的頁腳。並且不要忘記爲你的頁腳設置寬度 – Roman

@羅曼不，和斯科特羅威爾解決方案一樣：我看到這個：dl.dropboxusercontent.com/u/59666091/footer_trouble1.jpg – brabertaser19

對不起，看到答案太晚了 – Roman

你應該能夠做到這一點：

html, body { 
    height: 100%; 
    padding:0px; 
    margin:0px; 
} 

.header { 
    height:200px; 
    width:100%; 
} 

.wrapper { 
    min-height: 100%; 
    height: auto !important; 
} 

.footer { 
    height: 176px; 
} 



<body> 
    <div class="header"> 
     <p>header</p> 
    </div> 
    <div class="wrapper"> 
     <p>Your website content here.</p> 
    </div> 
    <div class="footer"> 
     <p>Footer</p> 
    </div> 
</body>

來源

2013-10-16 14:22:58

我試試這個之前，我看到這個：https://dl.dropboxusercontent.com/u/59666091/footer_trouble1.jpg – brabertaser19

我認爲這是因爲你的包裝類設置爲position：absolute ;.這基本上使得高度被其他div所忽略。嘗試刪除它。 –

刪除什麼？ div我需要200％）＆？ – brabertaser19

頁腳在頁面的底部，如果包裝是絕對定位

回答

相關問題