Question

我页面上的主要容器包含所有内容，它应该在页面的整个长度上。但由于某种原因，底部有一个小间隙，显示其背后的背景。有什么想法吗？非常感谢。

这是我的代码：

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

Answer 1

如果您希望将图像保留在主容器之外，可以将img display 属性更改为 block ，而不是默认内联价值。我还建议将 margin 属性设置为 auto 替换中心标记，因为中心标记为not supported in HTML5。

img{
  display:block;
  margin:auto;
}

Answer 2

你的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>

Answer 3

我认为您的标记存在问题。

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

尝试：

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

页面底部和内容之间的间距？

3 个答案: