Question

我不确定此页面上的其他内容是否有错误，但我的页面下方有很多不需要的空白区域。

我尝试过的一些故障排除方法： - 将高度设置为HTML

- 将身高设置为100％

- 我试图将Body的高度设置为100px，200px ..只是为了看它是否发生变化，而不是它。

- 我试图为Body设置margin-bottom，没有运气。

- 继续玩Body margin

到目前为止没有运气。我会发布我的代码，提前谢谢。

HTML：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="CSS/Project3.css">
</head>
<body>


    <div id="setpos">
    <h1>Your Wife Is Calling For You To Come Upstairs.</p>
    <p>However, you've had a really long day and don't feel like doing that.</p></h1>
    <p> &nbsp</p>
    <p> &nbsp</p>
    <p> &nbsp</p>

    <p>Do you swallow the guilt with &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp?</p>
    <p> &nbsp</p>
    <p>Go for the &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp?</p>
    <p> &nbsp</p>
    <p>Or listen to your wife and go upstairs?</p>
        <div><a class="Mug" href="index.php"></a></div>
<div><a class="Remote" href="index.php"></a></div>
    </div>
</body>

CSS：

#setpos{
margin: 500px;
color: #5bc32d;
font-size: 30px;

}

body {
height: 100%;
position: relative;
margin: -200px -200px;
top: -110px;
}

a.Mug {
display:block;
position: relative;
background: url(../IMG/beer_hoveroff.png) no-repeat;
height: 100px;
width: 90px;
top: -350px;
left: 370px;
}

h1{
color: #500000;
font-size: 100%;
font-family: 'rokkitt', serif;

}

div{
}

a.Mug:hover {
color: #5bc32d;
background: url(../IMG/beer_hoveron.png) no-repeat;
}

a.Remote {
display:block;
position: relative;
background: url(../IMG/remote_hoveroff.png) no-repeat;
height: 110px;
width: 110px;
top: -330px;
left: 120px;
}

a.Remote:hover {
color: #5bc32d;
background: url(../IMG/remote_hoveron.png) no-repeat;
}

}

我认为这可能与我的图像有关，如果是这样的话，什么是更有效/专业的定位方式？除此之外，我的问题是：如何摆脱页面下的空白区域http://iam.colum.edu/students/jordan.max/aim/project3.html）？而且，我做错了什么我不应该在这里？

Answer 1

这可能是因为这个CSS就在这里。

#setpos{
    margin: 500px;
    color: #5bc32d;
    font-size: 30px;
}

如果您不希望底部margin执行此操作：

margin: 500px 500px 0;

// or to just have the margin on the top, do this:

margin: 500px 0 0;

旁注，不确定为什么你在margin: -200px -200px;标签上使用<body />这样......可能不是个好主意。我只能假设你把它放在这里以抵消“白色空间”??

网页底部有大量的空白区域

1 个答案: