Question

我的页面底部有大量的空白，我似乎无法摆脱它。我有一个<div class="container">包装了我的所有代码，当我摆脱它时，空白确实消失了，但我的所有定位都搞砸了。我的页面中也有引导链接，但我并没有真正使用引导程序......但是当我删除链接时，我的所有CSS都消失了......这可能是问题的一部分吗？我尝试了很多东西

html, body {

}

但似乎没有任何效果。

HTML：

<!DOCTYPE html>
<html>
<head>
  <title>All Quizes</title>
  <link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>

  <link rel="stylesheet" type="text/css" href="stylesheet.css">

    <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

  <script src="javesheet.js"></script>

</head>
<body>



<div class="logo">
  <p>Insert logo link here...</p>
</div>

<div class="container">

  <div class="feature">
    <div class="feature-content">
      <p>Featured Quiz</p>
      <p>...</p>
    </div>
  </div>


  <div class="rails-quiz">
    <div class="rails-quiz-content">
      <img src="ruby.png">
      <p>Rails Quiz</p>
    </div>
  </div>
  <div class="rails-start-button">
    <p>Start</p>
  </div>

  <div class="js-quiz">
    <div class="js-quiz-content">
      <img src="javascript.png">
      <p>JavaScript Quiz</p>
    </div>
  </div>
  <div class="js-start-button">
    <p>Start</p>
  </div>

  <div class="html-css-quiz">
    <div class="html-css-quiz-content">
      <img src="html.png">
      <p>HTML/CSS Quiz</p>
    </div>
  </div>
  <div class="html-css-start-button">
    <p>Start</p>
  </div>

  <div class="bottom-1">
    <h1>Rails</h1>
    <p></p>
  </div>

  <div class="bottom-2">
    <h1>JavaScript</h1>
  </div>

  <div class="bottom-3">
    <h1>HTML & CSS</h1>
  </div>
</div>

</body>
</html>

CSS：

.container { border: 1px solid red; }

.logo {
  position: relative;
  left: 10px;
  top: 10px;
  color: black;
  font-family: 'Quicksand', sans-serif;
  font-size: 30px;
}

.feature {
  width: 700px;
  height: 300px;
  background-color: #008080;
  position: relative;
  top: 90px;
  left: 150px;
  opacity: .9;
  text-align: center;
  font-size: 48px;
  font-family: 'Quicksand', sans-serif;
}

.feature-content {
  opacity: 1;
  color: white;
}

.rails-quiz {
  width: 250px;
  height: 300px;
  background-color: #008080;
  opacity: .9;
  top: 220px;
  position: relative;
  text-align: center;
  font-size: 24px;
  font-family: 'Quicksand', sans-serif;
}


.rails-quiz-content {
  opacity: 1;
  color: white;
  position: relative;
  top: 5px;
}

.rails-start-button {
  width: 80px;
  height: 30px;
  background-color: black;
  position: relative;
  top: 115px;
  left: 90px;
  opacity: .5;
  text-align: center;
  font-size: 20px;
}



.js-start-button {
  width: 80px;
  height: 30px;
  background-color: black;
  position: relative;
  top: -220px;
  left: 440px;
  opacity: .5;
  text-align: center;
  font-size: 20px;

}

.html-css-start-button {
  width: 80px;
  height: 30px;
  background-color: black;
  position: relative;
  top: -545px;
  left: 790px;
  opacity: .5;
  text-align: center;
  font-size: 20px;

}

.js-quiz {
  width: 250px;
  height: 300px;
  background-color: #008080;
  opacity: .9;
  top: -110px;
  left: 350px;
  position: relative;
  text-align: center;
  font-size: 24px;
  font-family: 'Quicksand', sans-serif;
}

.js-quiz-content {
  opacity: 1;
  color: white;
  position: relative;
}

.html-css-quiz {
  width: 250px;
  height: 300px;
  background-color: #008080;
  opacity: .9;
  top: -440px;
  left: 700px;
  position: relative;
  text-align: center;
  font-size: 24px;
  font-family: 'Quicksand', sans-serif;
}

.html-css-quiz-content {
  opacity: 1;
  color: white;
  position: relative;
  top: 5px;
}

.bottom-1 {
  width: 250px;
  height: 300px;
  background-color: #99cccc;
  opacity: 1;
  top: -420px;
  position: relative;
  text-align: center;
  font-size: 24px;
  font-family: 'Quicksand', sans-serif;
}

.bottom-2 {
  width: 250px;
  height: 300px;
  background-color: #99cccc;
  opacity: 1;
  top: -740px;
  left: 350px;
  position: relative;
  text-align: center;
  font-size: 24px;
  font-family: 'Quicksand', sans-serif;
}

.bottom-3 {
  width: 250px;
  height: 300px;
  background-color: #99cccc;
  opacity: 1;
  top: -1060px;
  right: 0px;
  left: 700px;
  position: relative;
  text-align: center;
  font-size: 24px;
  font-family: 'Quicksand', sans-serif;
}

Answer 1

修改：.bottom-3上的否定位置会导致问题。

.bottom-3 {
    top: -1060px;
    margin-bottom: -1060px; /* add this */
}

根据需要调整该值。

Answer 2

如果您不希望任何填充或边距来自html或body元素，则必须执行此操作：

html, body {
    padding: 0;
    margin: 0;
}

这样可以实际取消填充和边距。

html, body {

}

只是尝试在现有规则（填充和边距来自哪里）之上进行堆叠，而不是覆盖它们。

HTML / CSS：我无法摆脱页面底部的空白

2 个答案: