How to remove white gap between two divisions? - html

Question

I'm using Bootstrap 4 with a custom CSS stylesheet and the structure of my page is as follows:
<header>
<!-- header content (fixed) -->
</header>
<main role="main" class="container-fluid">
<!-- main content -->
</main>
<div id="contact-information">
<!-- contact information (absolute) -->
</div>
<footer class="footer">
<!-- footer content (absolute) -->
</footer>
Now, the issue I am facing is the following, I want <main> to take up all the gap between <header> and <div id="contact-information"> but the actual output is something like this:
<header>
<!-- header content -->
</header>
<main role="main" class="container-fluid">
<!-- main content -->
</main>
<!-- WHITE GAP -->
<div id="contact-information">
<!-- contact information (absolute) -->
</div>
<footer class="footer">
<!-- footer content -->
</footer>
I have looked at similar questions but to no avail, the white gap still remains. I have the feeling it is something to do with my custom CSS. My actual code is (HTML and CSS of each section will follow respectively):
<main> HTML & CSS
<main role="main" class="container-fluid" style="border: 2px solid red;">
<div id="content-container">
<div id="content-container-content">
<h2 class="text-uppercase">About Us</h2>
<hr>
<p id="content-container-sub-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</div>
</div>
</main>
main {
margin-top: 150px;
padding: 0 !important;
}
#content-container {
position: relative;
height: 432px;
background-color: white;
}
#content-container hr {
visibility: hidden;
}
#content-container-content {
position: absolute;
text-align: center;
width: 90%;
color: #83323e;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#content-container-sub-content {
font-size: 24px;
width: 100%;
color: #a63f4f;
line-height: 40px;
}
<div id="contact-information"> HTML & CSS
<div id="contact-information">
<h3>Company Name</h3>
<p>12 Street, Area, City AB1 2CD, UK</p>
<p>Tel: [phone] | Mobile: [phone]</p>
<p>
View in Map
</p>
<div>
<span style="cursor: pointer;">
<i class="fa fa-twitter fa-2x" aria-hidden="true" style="color: #00aced;"></i>
</span>
<span style="cursor: pointer;">
<i class="fa fa-youtube-play fa-2x" aria-hidden="true" style="color: white;"></i>
</span>
</div>
</div>
#contact-information {
position: absolute;
height: 283px;
width: 100%;
text-align: center;
color: white;
background-color: #a63f4f;
bottom: 60px;
padding: 50px;
}
Visual
Notice the bordered red box doesn't take up all the space responsively.
Live Example
Please click here to view it live.
So, my question is, how do I remove said white gap?

Answer 1

Here's what you should do in order to make that gap vanish on any device:
place #contact-information inside either <header>, <footer> or <main>, based on whether you want it on every page (<header> - above page content, <footer> - below page content) or only on the current page <main>
stop using <main> for styling purposes. It's a container for the content of any and every page, so any styles you add to it will apply on all pages of your website. It is better to treat it as a functional container and only style its children based on your websites' specific needs
If you want <main>'s min-height to fill up the entire page (allow full screen backgrounds, be able to center stuff in the middle of the screen, etc...), give it a min-height of 100vh, no margin, a padding-top equal to <header>s actual height and a padding-bottom equal to <footer>s actual height.
Since both <header> and <footer> have different heights based on device, this should be done dynamically, using JavaScript, on load and resize events of Window object.
Loosely translated into code (I had to make a few assumptions) the above would be:
function setMinHeight() {
$('main').css({
paddingTop: $('header nav').eq(0)[0].clientHeight + 'px',
paddingBottom: $('footer').height() + 'px',
})
}
$(window).on('load resize', setMinHeight);
#contact-information {
text-align: center;
color: white;
background-color: #a63f4f;
bottom: 60px;
padding: 50px;
}
#content-container {
background-color: white;
display: flex;
align-items: center;
justify-content: center;
padding: 50px;
color: #83323e;
border: 2px solid red;
}
#content-container hr {
visibility: hidden;
}
#content-container-sub-content {
font-size: 24px;
color: #a63f4f;
line-height: 40px;
}
main:not(#_) {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main #content-container {
flex-grow: 1;
}
main #contact-information {
flex: 0 0 auto;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #83323e;
}
.bg-dark:not(#_) {
background-color: #83323e!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-default my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<main role="main" class="container-fluid">
<div id="content-container" class="row">
<div class="col-12">
<h2 class="text-uppercase">About Us</h2>
<hr>
<p id="content-container-sub-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div id="contact-information" class="row">
<div class="col-12">
<h3>Company Name</h3>
<p>12 Street, Area, City AB1 2CD, UK</p>
<p>Tel: [phone] | Mobile: [phone]</p>
<p>
View in Map
</p>
<div>
<span style="cursor: pointer;">
<i class="fa fa-twitter fa-2x" aria-hidden="true" style="color: #00aced;"></i>
</span>
<span style="cursor: pointer;">
<i class="fa fa-youtube-play fa-2x" aria-hidden="true" style="color: white;"></i>
</span>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
I might be wrong, but from what I found in your example it looks like your team is lacking a CSS guy and you think Bootstrap v4 will help you fill the gap. Chances are it won't. Bootstrap is rock solid if:
you don't stray from given examples (don't need a custom layouts) or...
you understand the CSS behind it, its logic and how to modify it so you don't break anything on various devices.
Besides, v4 is fragile now. Has a few unfixed issues and it's not yet cross-browser/cross-device. If you really don't afford the CSS guy, you're better off using latest v3, which is extremely solid, tested beyond imagination. It's unlikely you'll need something for v3 that hasn't been done yet (which is not the case of v4).
For more details on v3 vs v4 and upgrading from one to the other, I've recently answered this question and the answer stands. For production environments v4 doesn't yet stand a chance against v3, IMHO.