CSS/HTML頁腳不粘連

我的頁腳有一個大問題。我搜索了1小時，現在試圖找到解決辦法。我嘗試了一切，沒有任何工作！CSS/HTML頁腳不粘連

下面是我的HTML結構的例子。部分，然後在頁腳後面。

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 
    <header> 
     Hello World 
    </header> 

    <nav> 
     Navigation 
    </nav> 

    <section> 
     Hellooooo! 
    </section> 

    <footer id="fixed"> 
     Footer 
    </footer> 
</body> 
</html>

這是我的CSS：

footer { 
    bottom: 0; 
    width: 100%; 
    height: 60px; 
    background-color: #333333; 
    padding-top: 15px; 
    color: #fff; 
    font-family: 'Germania One', cursive; 
} 

#fixed { 
    position: relative; 
    bottom: 0; 
} 

body { 
    font-family: sans-serif; 
    background-color: #4F4F4F; 
    padding: 0; 
    margin: 0; 
    height:100%; 
    position: relative; 
} 

section { 
    padding-bottom: 30px; 
    position: relative; 
    min-height: 100%; 
}

我把它粘在底部與position: static;但隨後在部分重疊我的內容！我怎樣才能讓它堅守底部，而不會重疊我的文字？如果它們彼此接近，我希望節和頁腳之間有30像素的空間。

來源

2016-01-17 Tibia Rook

增加了新的答案，對不起 –

下面的CSS修復了底部頁腳int，但是調整了頁腳的大小將與內容重疊。

#fixed { 
    position:fixed; 
    left:0px; 
    bottom:0px; 
    width:100%; 
    margin-top:30px; 
    top:100px; 
}

更新：

如果您知道該部分的height，然後把那個height爲top的footer。

來源

2016-01-17 20:36:48

沒有工作，現在我已經嘗試過像10倍。 –

@TibiaRook你可以發佈顯示問題的截圖嗎？您的意思是在底部顯示頁腳而不是在結束其他部分時顯示頁腳？ –

http://i.imgur.com/v6Pfjb3.png –

我所做的是：

使body { position: relative }
使頁腳{ position: absolute; bottom:0; left 0; }
給予部分一些空間來顯示部分{填充底：60像素; }

這樣，頁腳總是在你身體的底部（你的文檔）沒有任何黑客攻擊，並且適用於IE7 +和其他所有瀏覽器。如果你在整頁上運行代碼，即使有很多空間可以運行，你也可以看到底部的頁腳。

html { 
 
    height: 100%; 
 
} 
 
body { 
 
    /*default*/ 
 
    min-height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
    
 
    /*stick to bottom*/ 
 
    position: relative; /*make it first positioned ancestor element*/ 
 
    
 
    /*style*/ 
 
    font-family: sans-serif; 
 
    background-color: #4F4F4F; 
 
} 
 
section { 
 
    /*stick to bottom*/ 
 
    padding-bottom: 60px;/*give it some room to show*/ 
 
} 
 
footer { 
 
    /*stick to bottom*/ 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    
 
    /*style*/ 
 
    width: 100%; 
 
    background-color: #333333; 
 
    padding-top: 15px; 
 
    color: #fff; 
 
    font-family: 'Germania One', cursive; 
 
}

<header> 
 
    Hello World 
 
</header> 
 

 
<nav> 
 
    Navigation 
 
</nav> 
 

 

 
<section> 
 
    Cras hendrerit lacus a bibendum tristique. Suspendisse a risus elementum ipsum tristique tristique. Vivamus vitae turpis ut tortor fermentum elementum. Duis in tellus vel ligula vehicula porttitor. ivamus venenatis tellus tincidunt, cursus metus nec, 
 
    tempor ex. Nulla efficitur nisl ut dolor pulvinar scelerisque. Cras hendrerit lacus a bibendum tristique. Suspendisse a risus elementum ipsum tristique tristique. Vivamus vitae turpis ut tortor fermentum elementum. Duis in tellus vel ligula vehicula 
 
    porttitor. Nulla efficitur nisl ut dolor pulvinar scelerisque. Cras hendrerit lacus a bibendum tristique. Suspendisse a risus elementum ipsum tristique tristique. Vivamus vitae turpis ut tortor fermentum elementum. Duis in tellus vel ligula vehicula 
 
    porttitor. 
 
</section> 
 
<footer id="fixed"> 
 
    Footer 
 
</footer>

來源

2016-01-17 21:15:45

CSS/HTML頁腳不粘連

回答

相關問題