Question

我看了整个网络，包括搜索整个堆栈溢出，但我尝试过的一切都无法正常工作。

我的html和css代码如下。问题是占据页面底部的大空白区域。

body
{
  background-image: url("img/background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
.box
{
  position: absolute;
  right: 0px;
  width: 80%;
  top: 20%;
  background-image: url("img/box.png");
  background-repeat: no-repeat;
  background-size: 80%;
  height: 100%;
}
.box img{
  display: block;
}
.explore
{
  vertical-align: top;
  position: absolute;
  right: 42%;
  width: 10%;
  top: 70%;
  background-image: url("img/explore.png");
  background-repeat: no-repeat;
  background-size: 80%;
  height: 100%;
}
.explore img {
  display: block;
}

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Harry Roper Design</title>
  </head>

  <body>
    <div class = "box"></div>
    <div class = "explore"></div>
  </body>
</html>

Answer 1

您应该从CSS中删除height: 100%;以解决“占据页面底部的大空白”问题。

并且没有可接受的理由将两个div用作body内容并在CSS中定位absolute

Answer 2

看起来没有空白区域。

我使用虚拟图像模拟您的网站并为div元素添加了边框，这样您就可以看到正在发生的事情：

http://jsfiddle.net/9xcwjxb6/

首先 - 设置top: 70%;和height: 100%;将您的.explore div向下移动70％并将其高度设置为100％，这意味着您的最终总高度为170％，那就是你的“白色空间”来自哪里（事实上，这不是空格，而是你的.explore元素。）

我认为你应该阅读更多关于centering in CSS的内容，因为我想这就是你在这里尝试实现的目标。

正确的解决方案应该更接近这一点：

body {
  background: url("http://dummyimage.com/2000x2000/999999/fff&text=+") no-repeat;
}

.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -225px;
    margin-left: -300px;
    text-align: center;
    width: 600px;
}

.box {
  background: url("http://dummyimage.com/600x400/000/fff") no-repeat;
  height: 400px;
}

.explore {
  display: inline-block;
  margin: 20px 0 0 0;
  background: url("http://dummyimage.com/200x50/000/fff") no-repeat;
  width: 200px;
  height: 500px;
}

See it live

如果您不关心对旧版浏览器的支持，也可以使用flexbox。

Css - 我无法解决的白色空间

2 个答案: