HTML頁腳將無法正確顯示

我正在創建一個網站，似乎頁腳不會正確顯示在頁面的底部。HTML頁腳將無法正確顯示

這是我的HTML源代碼

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="css/style.css" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
</head> 
<title>MyTitle</title> 
<body> 

<div id="main"> 
    <header> 
     <div id="logo"> 
     <div id="logo_text"> 
      <!-- class="logo_colour", allows you to change the colour of the text --> 
      <h1><a href="index.html">My<span class="logo_colour">Title</span></a></h1> 
      <h2>Fast. Colorful. What</h2> 
     </div> 
     <p style="float: right;"><img src="images/twitter.png" alt="twitter" />&nbsp;<img src="images/facebook.png" alt="facebook" />&nbsp;<img src="images/rss.png" alt="rss" /></p> 
     </div> 
     <nav> 
     <ul class="sf-menu" id="nav"> 
      <li class="selected"><a href="index.php">Home</a></li> 
      <li><a href="main.php"><font color="red"> Start </font></a></li> 
      <li><a href="main.php"><font color="DodgerBlue "> Folio </font></a></li> 
      <li><a href="contact.php">Contact Us</a></li> 
     </ul> 
     </nav> 
    </header> 

<!-- Setting the Date --> 

<?php 
    $showDate = date("Y.m.d"); 
    echo "<font size = '5' color = 'aqua'> ".", " . $showDate . "</font>" . "<br>"; 
?> 

<!-- Print Word 1 --> 
<div class = "column"> 
<h1>Word 1</h1> 
</div> 

<!-- Print Word 2 --> 
<div class = "column"> 
<h1>Word 2</h1> 
</div> 

<!-- Print Word 3 --> 
<div class = "column"> 
<h1>Word 3</h1> 
</div> 

<!-- Print Word 4 --> 
<div class = "column"> 
<h1>Word 4</h1> 
</div> 

<footer> 
     <p>Copyright &copy; photo_bw | <a href="http://www.heartinternet.co.uk/dedicated-servers/">Dedicated servers</a> | <a href="http://www.css3templates.co.uk">design from css3templates.co.uk</a></p> 
</footer> 

</div> 
</body> 
</html>

這是我的CSS文件：

html { 
    height: 100%; 
} 

article, aside, figure, footer, header, hgroup, nav, section { 
    display:block; 
} 

body { 
    font: normal .85em 'Droid Sans', arial, sans-serif; 
    background: #2E2E2E url(../images/pattern.png); 
    color: #444; 
} 

p { 
    padding: 0 0 20px 0; 
    line-height: 1.7em; 
} 

#main, nav, #container, #logo, #site_content, footer { 
    margin-left: auto; 
    margin-right: auto; 

} 

#main { 
    margin: 0 auto; 
    width: 930px; 
    background: transparent; 
    padding-bottom: 30px; 
} 

header { 
    margin: 20px 0 25px 0; 
    height: 150px; 
} 

nav { 
    height: 44px; 
    width: 930px; 
    float: right; 
    margin: 0 auto 0 auto; 
    color: #222; 
    background: #404040; 
} 

footer { 
    width: 928px; 
    font: 100% 'Droid Sans', arial, sans-serif; 
    height: 30px; 
    padding: 9px 0 15px 0; 
    color: #FFF; 
    text-align: center; 
} 

.column { 
    float: left; 
    margin: 8px; 
} 

footer p { 
    line-height: 1.7em; 
    padding: 0 0 10px 0; 
} 

footer a { 
    color: #FFF; 
    text-decoration: underline; 
} 

footer a:hover { 
    color: #FFF; 
    text-shadow: none; 
    text-decoration: none; 
}

與頁腳的問題發生後，我設置

.column { 
    float: left; 
    margin: 8px; 
}

，這樣的話（單詞1，單詞2，...）將會彼此相鄰，但即使我結束了頁腳靜止的塊，也會出現n分機到單詞4.我怎樣才能使它成爲頁面的底部，因爲它應該是？告訴我是否遺漏了任何CSS元素，因爲我只採取我認爲重要的東西。

謝謝。

來源

2014-09-25 Cael

加上'明確：兩者;''到footer' - http://jsfiddle.net/khesay 0g/ – Anonymous 2014-09-25 03:12:00

謝謝！修復它 – Cael 2014-09-25 03:19:23

您可以通過將clear: both;添加到footer元素來向下移動以清除左右浮動塊。

的jsfiddle - DEMO

footer { 
    clear: both; 
    width: 928px; 
    font: 100% 'Droid Sans', arial, sans-serif; 
    height: 30px; 
    padding: 9px 0 15px 0; 
    color: #FFF; 
    text-align: center; 
}

更多信息：

Mozilla的MDN - CSS clear property

來源

2014-09-25 03:22:55 Anonymous

HTML頁腳將無法正確顯示

回答

相關問題