Question

页脚下面有大量的额外空间。它与身体颜色相同。一切都很好，直到我添加了一个带有小联系信息的div并将其与我的联系表单右侧对齐。

在我重新定位它之前，看起来在联系表单下面仍然有额外的空间div。只有额外的空间已经重新定位在页脚下方并且我已经尝试了一切，就像弄乱边缘/身体的高度，将接触部分包裹在容器内部，并以更多的余量做更多事情......此时我不知道该怎么做。我在Bootstrap html / css工作。

＆＃13;

#contact {
  background-color: #696969;
  height: 750px;
}

#con {
  text-align: center;
  color: #E1E1E1;
  padding: 80px 0 80px 0;
}

#con::after {
  content: "";
  display: block;
  margin: 0 auto;
  width: 50%;
  padding-bottom: 10px;
  border-bottom: 3px solid #E1E1E1;
}

form {
  height: 100%;
  margin-left: 40px;
}

input[type="text"],
input[type="email"],
textarea {
  display: flex;
  border-radius: 5px;
  padding: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  border: #2CEAA3;
  background: #E1E1E1;
  outline-color: #2CEAA3;
  font-size: 24px;
  color: #4E0250;
}

input,
textarea {
  margin: 20px;
  max-width: 350px;
}

input {
  max-width: 250px;
}

input[type=submit] {
  color: #4E0250;
  font-size: 24px;
  border-radius: 5px;
  margin-bottom: 15px;
}

.placeholder::placeholder {
  color: #4E0250;
  font-size: 25px;
  opacity: .50;
}

#conmsg {
  text-align: justify;
  position: relative;
  display: inline-block;
  max-width: 400px;
  font-size: 1.64em;
  color: #E1E1E1;
  left: 600px;
  bottom: 400px;
  line-height: 33px;
}

.footer {
  position: relative;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  height: 60px;
  background: blue;
  text-align: center;
  color: #fff;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="contact">
  <h2 id="con">Contact Me</h2>

  <div id="form_content">
    <form>
      <input class="placeholder" type="text" name="name" placeholder="Wenyu Smile" />
      <input class="placeholder" type="text" name="phone" placeholder="412-218-4444" />
      <input class="placeholder" type="text" name="email" placeholder="ismile@gmail.com" />
      <textarea class="placeholder" name="message" placeholder="Great portfolio, let's talk soon!"></textarea>
      <input class="value" type="submit" name="send" value="Message Me" />
    </form>
  </div>
  <div id="conmsg">Drop me a line and share what's on your mind. Thinking of adding a reliable, new edition to your team? Have advice on how to improve my page? Maybe you'd enjoy a stimulating conversation on Quantum Physics and the interconnectedness of all life? Or
    perhaps you're in search of great food and drink around the city. Oh yes, I can help with that too. Either way, I look forward to hearing from you soon.</div>
</div>
<!--end contact-->
<div class="footer">Footer Text</div>

＆＃13;

Answer 1

您在val allPages = getPage(page++).takeWhile(nonEmpty).reduce(_ ::: _) div上设置了明确的高度。删除它：

#contact

Answer 2

#conmsg div位于相对位置，空白空间是未定位的位置。

根据您要实现的目标，将其绝对定位或固定，或将其移至HTML顶部并给予底部边距为负，可能会纠正此问题。

Answer 3

你有没有试过这样的事情：

            <div id="contact">
                <h2 id="con">Contact Me</h2>

                <div id="form_content">
                    <form>
                        <input class="placeholder" type="text" name="name" placeholder="Wenyu Smile" />
                        <input class="placeholder" type="text" name="phone" placeholder="412-218-4444" />
                        <input class="placeholder" type="text" name="email" placeholder="ismile@gmail.com" />
                        <textarea class="placeholder" name="message" placeholder="Great portfolio, let's talk soon!"></textarea>
                        <input class="value" type="submit" name="send" value="Message Me" />    
                    </form>
                </div>
                    <div id="conmsg">Drop me a line and share what's on your mind. Thinking of adding a reliable, new edition to your team? Have advice on how to improve my page? Maybe you'd enjoy a stimulating conversation on Quantum Physics and the interconnectedness of all life? Or perhaps you're in search of great food and drink around the city. Oh yes, I can help with that too. Either way, I look forward to hearing from you soon.</div>
            </div><!--end contact-->
<!-- FOOTER -->
        <footer>
          footer text
        </footer>

<!-- OR SECTION -->
<section>
  footer text
</section>
        </body>

或者您是否看过这个堆栈问题并在底部粘贴？

How to stick <footer> element at the bottom of the page (HTML5 and CSS3)?

页脚后删除多余的空格

3 个答案: