頁面底部和內容之間的間距？

我的網頁上的主容器包含所有內容，並且應該放在頁面的整個頁面上。但由於某種原因，底部有一個微小的間隙，顯示背後的背景。有什麼想法嗎？非常感謝。頁面底部和內容之間的間距？

這裏是我的代碼：

HTML：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>GS4 Concept Home Page</title> 
<link type="text/css" href="unicss.css" rel="stylesheet"/> 
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> 
<script src="Script/jquery.js"></script> 
<script src="Script/main.js"></script> 
</head> 

<body> 
    <div id="header"><h1 class="headover">You Are Home.</h1> 
    <div class="nav"> 
     <ul class="navigation"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Galaxy S4</a> 
       <ul> 
        <li><a href="#">Verizon</a></li> 
        <li><a href="#">ATT</a></li> 
        <li><a href="#">Sprint</a></li> 
        <li><a href="#">T-Mobile</a></li> 
        <li><a href="#">International</a></li> 
       </ul> 
       </li> 

     </ul> 
    </div> 
</div> 
    <div id="container">//breaks for testings sake 
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
    </div><center><img src="Images/Galaxy_Family.jpg" width="70%" /></center> 

</body> 
</html>

CSS：

body { 
    background-image:url(Images/backgroundmain.jpg); 
    min-width:100%; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size:15px; 
    margin:0; 
} 

.headover{ 
    color:#333; 
    float:right; 
} 
.headover:hover{ 
    color:white; 
} 

#gfamily{ 
    margin:auto 
} 

#header{ 
    position:fixed; 
    text-align:center; 
    background-color:#666; 
    margin:auto; 
    width:100%; 
    height:54px; 
    display:block; 
    min-width:1000px; 
} 

#container{ 
    background-color:#FFF; 
    margin:auto; 
    width:70%; 
    min-height:100%; 
} 

.nav{ 
    margin-left:5px; 
    text-align:center; 
    background-color:#999; 
} 

.navigation { 
    position:fixed; 
    display:block; 
    margin-top:15px; 
    padding:0; 
    list-style:none; 
} 

.navigation li { 
    float:left; 
    width:150px; 
    position:relative; 
} 

.navigation li a { 
    background:#262626; 
    color:#fff; 
    display:block; 
    padding:8px 7px 8px 7px; 
    text-decoration:none; 
    border-top:1px solid #FFF; 
    border-bottom:1px solid #FFF; 
    text-align:center; 
    text-transform:uppercase; 
} 
.navigation li a:hover { 
    color:#666; 
} 

.navigation ul { 
    position:absolute; 
    left:0; 
    display:none; 
    margin:0 0 0 -1px; 
    padding:0; 
    list-style:none; 
    border-bottom:1px solid #FFF; 
} 

.navigation ul li { 
    width:150px; 
    float:left; 
    border-top:none; 
} 

.navigation ul a { 
    display:block; 
    height:15px; 
    padding:8px 7px 13px 7px; 
    color:#fff; 
    text-decoration:none; 
    border-top:none; 
    border-bottom:1px solid #FFF; 
} 

.navigation ul a:hover { 
    color:#666; 
}

的JavaScript（如果它的事項..？）：

// Executes the function when DOM will be loaded fully 
$(document).ready(function() { 
// hover property will help us set the events for mouse enter and mouse leave 
    $('.navigation li').hover(
// When mouse enters the .navigation element 
     function() { 
//Fade in the navigation submenu 
      $('ul', this).fadeIn(); // fadeIn will show the sub cat menu 
     }, 
// When mouse leaves the .navigation element 
     function() { 
//Fade out the navigation submenu 
      $('ul', this).fadeOut(); // fadeOut will hide the sub cat menu 
     } 
    ); 
});

Shows the space on the bottom of the page

來源

2014-03-30 sirnomnomz

你可以上傳到jsfiddle什麼的？除此之外，我會說嘗試把'margin-bottom：0px;'放在'＃容器'和/或'padding-bottom：0px;'放在'body'上 – SharkofMirkwood

另外，確保容器底邊追加'margin：auto;'，或者只是將該行更改爲'margin：0px auto;' – SharkofMirkwood

嘗試在圖像中添加'line-height：0'到中心標記或'display：block'圖像 – Mathias

我認爲你的標記存在問題。

<div id="container">//breaks for testings sake 
    <br> 
</div><center>...</center>

嘗試：

<div id="container">//breaks for testings sake 
    <br> 
    <center>...</center> 
</div>

來源

2014-03-30 21:34:27 beautifulcoder

杜，這工作完美。我不知道我怎麼看不到這個，非常感謝你！ – sirnomnomz

請勿使用
作爲內容高度，如果您需要有效的html代碼 – wpdaniel

我不認爲這可以保證投票結果。無論如何，
是有效的HTML。 – beautifulcoder

你有一個無效的HTML結構，試試這個方法，而不是

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>GS4 Concept Home Page</title> 
<link type="text/css" href="unicss.css" rel="stylesheet"/> 
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> 
<script src="Script/jquery.js"></script> 
<script src="Script/main.js"></script> 

<style> 
.container { 
    width:960px; 
    height:auto; 
    background:white; 
    padding: 10px; 
} 

.centered { 
    text-align:center; 
} 

.responsiveimg { 
    display: block; 
    max-width:100%; 
    height:auto 
} 

</style> 
</head> 
<body> 
<div id="header"> 
    <h1 class="headover">You Are Home.</h1> 
    <div class="nav"> 
     <ul class="navigation"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Galaxy S4</a> 
      <ul> 
       <li><a href="#">Verizon</a></li> 
       <li><a href="#">ATT</a></li> 
       <li><a href="#">Sprint</a></li> 
       <li><a href="#">T-Mobile</a></li> 
       <li><a href="#">International</a></li> 
      </ul> 
      </li> 
     </ul> 
    </div> 
</div> 
<div class="container"> 

    <div class="centered"> 
     <img src="Images/Galaxy_Family.jpg" class="responsiveimg" /> 
    </div> 

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

來源

2014-03-30 21:39:25 wpdaniel

如果你想保持主容器外的圖片，你可以改變img display property to block相對於默認的inline值。我還建議用保證金屬性設置爲自動替換中心標記，因爲中心標記是not supported in HTML5。

img{ 
    display:block; 
    margin:auto; 
}

來源

2014-03-30 22:13:44

頁面底部和內容之間的間距？

回答

相關問題