Remove extra space after footer

Question

There is a huge amount of extra space below footer. It is the same color as the body. Everything was fine until I added a div with a small contact message and aligned it to the right of my contact form.

It seems there is still the extra space below the contact form where the div originally would be until I re-positioned it.Only that extra space has relocated itself below the footer and I have tried EVERYTHING, like messing with the margin/height of the body, wrapping the contact portion inside of a container and doing more things with more margins... At this point I have no idea what to do. I'm working in Bootstrap html/css.

#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;
}

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

Please post the rest of your code – Alexander Edwards Oct 03 '17 at 18:48 — Alexander Edwards, Oct 03 '17 at 18:48

score 2 · Answer 1 · answered Oct 03 '17 at 18:55

2

You set an explicit height on your #contact div. Remove it:

#contact {
    background-color: #696969;
    /* height: 750px; */
}

answered Oct 03 '17 at 18:55

j08691

204,283
31
260
272

this may also have a lot to do with the extra space after the footer – T. Evans Oct 03 '17 at 19:10

score 1 · Accepted Answer · answered Oct 03 '17 at 19:01

The #conmsg div is positioned relatively, and the empty space is the location where it would have been had it not been positioned.

Depending on what you want to achieve, positioning it absolutely or fixed, or moving it to the top of the HTML and giving it a negative bottom margin, may correct the issue.

T. Evans · Answer 3 · 2017-10-03T19:02:03.153

have you tried doing something like this:

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

or have you seen this stack question and make it a sticky at the bottom?

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

Remove extra space after footer

3 Answers3