What is the best way to eliminate the white space between two sections?

I am currently utilizing Bootstrap 4 along with a custom CSS stylesheet for my website structure. Here is the layout:

<header>
    <!-- content in header (fixed) -->
</header>

<main role="main" class="container-fluid">
    <!-- main content -->
</main>

<div id="contact-information">
    <!-- contact information section (absolute) -->
</div>

<footer class="footer">
    <!-- content in footer (absolute) -->
</footer>

The issue I am encountering is that I want <main> to occupy the entire space between <header> and 

<div id="contact-information">
. However, the actual layout shows a white gap in between:

<header>
    <!-- header content -->
</header>

<main role="main" class="container-fluid">
    <!-- main content -->
</main>

<!-- WHITE GAP -->

<div id="contact-information">
    <!-- contact information section (absolute) -->
</div>

<footer class="footer">
    <!-- footer content -->
</footer>

I have searched for solutions to this problem without success. I suspect that it might be related to my custom CSS. Below is the code for each section along with the respective HTML and CSS:

<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: (01234) 123-456 | Mobile: 01234567891</p>
    <p>
        <a href="#" class="text-white" target="_blank">View in Map</a>
    </p>
    <div>
        <span style="cursor: pointer;">
            <i class="fa fa-twitter fa-2x" aria-hidden="true" style="color: #00aced;"></i>
        </span>
        &nbsp; &nbsp;
        <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

https://i.sstatic.net/ZLIdO.png

As observed, the red border does not expand to fill the available space responsively.

Live Instance

You can view the live example here.

Thus, my inquiry is, how can I eliminate this white gap?

htmlcsstwitter-bootstrapbootstrap-4removing-whitespace

Answer №1

Follow these steps to eliminate the gap on any device:

  • Place #contact-information inside either <header>, <footer>, or <main> based on your layout requirements.
  • Avoid using <main> for styling purposes. It should only be used as a content container.
  • If you want the min-height of <main> to fill the page, set it to 100vh and adjust padding based on the heights of <header> and <footer>.

To achieve this dynamically, use the following JavaScript code:

function setMinHeight() {
  $('main').css({
    paddingTop: $('header nav').eq(0)[0].clientHeight + 'px',
    paddingBottom: $('footer').height() + 'px',
  })
}
$(window).on('load resize', setMinHeight);

CSS styling:

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

Remember, understanding CSS logic is crucial for successful Bootstrap implementation, especially when dealing with version differences like v3 and v4.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Step-by-step guide on creating a linear graph in CSS using a table

I am a newcomer to the world of CSS and I am looking to create a graph using CSS without the use of any libraries or frameworks. Can someone kindly assist me in drawing a linear graph using this HTML table? Appreciate any help in advance. <html> & ...

htmlcss

Customizing the navbar to be inverse on each webpage using CSS, PHP, and Bootstrap

Dealing with a Bootstrap navbar across multiple pages on my website is becoming a hassle. Every time I need to make a change, I find myself jumping from one page to another just to update it. My objective is to have the ability to edit the navbar in one ce ...

phphtmlcsstwitter-bootstrap

Integrating a feature for displaying No Results Found

I am struggling to modify a script for auto-completing search fields. My goal is to include a "No Results Found" option along with a hyperlink when no matching results are found. I'm having difficulty figuring out how to add an else statement to displ ...

javascriptjqueryhtml

Tips for modifying the color of a specific section of the border within a table

.table { background: #fff; position: relative; bottom: 210px; width: 90%; border: 2px solid #fff; border-width: 30px; border-collapse: collapse; } .table-year-1 { font-size: 22px; width: 2%; padding-top: 3px; ...

htmlcss

Only the initial external CSS ID is functional, while the second one is inactive

I am facing an issue with my table where I have applied an external CSS that uses alternating shaded rows. My aim is to have specific table cells with different background and font colors - one cell with a green background and red font, and another with a ...

htmlcsshtml-table

"Unable to get elements by tag name using the getElementsByTagName method in

function updateLayout() { var para = document.getElementsByTagName("p"); para[0].style.fontSize = 25; para[1].style.color = "red"; } <p>Text in paragraph 1</p> <p>Text in paragraph 2</p> <p>Text in paragraph 3</p& ...

javascripthtmlcss

What is the best way to include a div element with a dynamic animation on a webpage?

I'm attempting to create a laser beam that can shoot enemies on the screen, much like in classic games such as Space Invaders or Galaga. However, I am encountering difficulties getting the laser to move when I click the button. Below is the code I hav ...

javascriptjqueryhtmlcss

How can you modify the Bootstrap width to activate the responsive design?

I currently have the following HTML code snippet: <!DOCTYPE html> <html lang="en> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale= ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Convert the html list to a select dropdown with a hidden input type

In the process of revamping some code created by a fellow colleague, I have decided to modify his list into a more suitable select-option drop-down list. The PHP code provided by him looks like this: echo "<ul>"; echo "<li><a href='#& ...

javascriptphphtmlselecthidden-field

Various Mobile Devices Display Website in Unique Ways

I've been having trouble getting my website to display consistently across different phones and could use some assistance. You can view the site at www.fpphotos.store. I have set overflow-x:auto; for the table containing the images, with CSS styles de ...

htmlcss

Interactive Inner Frame inspired by Google Maps, designed for easy dragging and navigating

Recently, I've been toying with the idea of creating a JavaScript game, particularly in the style of real-time strategy (RTS) games. The main question on my mind is this: How can I develop a draggable inner frame, akin to the functionality found in G ...

javascriptjqueryhtml

Live server feature in Visual Studio Code is not able to update CSS styles

Here's the problem: I'm encountering a CSS styling issue with the Live Server extension in Visual Studio Code (by ritwickdey). When I launch the live preview, none of my CSS styles are being applied. Although the HTML displays correctly, the CSS ...

cssvisual-studio-codeliveserver

Using Javascript/JQuery to apply pixel values in CSS styling

Recently, I've come across a discrepancy between two different ways of accessing CSS properties in jQuery: <foo>.css('marginTop') (which I always assumed was the standard notation) and <foo>.css('margin-top') (which ...

javascriptjquerycss

Ways to subtly adjust the edges of text in a design

https://i.stack.imgur.com/sr4PF.pngIs there a way to adjust the border of text that already has a border applied? I have successfully created the text with the border using the following CSS: h1 { font-size: 35pt; text-align: center; font-family: ...

csstext

Creating a minimalist metro-inspired menu using HTML and CSS

After researching online for a few days, I've just started learning HTML/CSS and my skills are currently at about a 6 out of 100. I have this code that functions as a blogger HTML widget, but I want to customize it further. Here is the code snippet: ...

htmlcssmenumicrosoft-metro

jQuery datatables provide a powerful feature for column filtering using jQuery functions

Looking for advice on how to add a filter to my jQuery datatable column that contains checkboxes. I want the filter to be a drop-down menu with options for "checked" and "unchecked", so that when a user selects one of these options, only the rows contain ...

jqueryhtmldatatables

Changing text and applying a different span class using a Jquery button toggle

My current issue involves a functional toggle button that smoothly slides a div up and down. However, I am facing problems when attempting to change the toggle button status: You can view a demonstration of my code here: http://jsfiddle.net/zwu0sn83/3/ B ...

javascriptjqueryhtml

Binding event listeners to dynamically created elements poses a challenge

I am facing difficulty in adding an event listener to dynamically created elements. The issue lies in my code where I am unable to detect the insertion of <p> element resulting in the lack of console message Bar Inserted. Could you point out if there ...

jqueryhtml

md-datepicker incorrect input- AngularJS

When selecting a non-existent date manually in the input, the calendar shows the date I expect but the input does not. Here is the code snippet: <md-datepicker name="startDate" class="custom-datepicker" ng-model="models.startDate" md-placeholder="Ente ...

htmlangularjsangularjs-filterangularjs-material

Is there a way for me to retrieve the value from an input, round it up to the nearest even number, and assign it to a new variable?

I am working on a project that involves two text boxes and a drop-down menu for providing rates. The values in the text boxes are given as inches. I want these inputs to be taken as values, rounded up to the next even number, and then set as variables. How ...

javascripthtml