'How to eliminate the space between the section / footer in a responsive manner?

I have a space showing in between my main content section and footer, causing an unnecessary scroll bar to be present in order to view the footer (after some dead space).

I've tried manually changing heights etc. of elements but had no luck, also experimented with overflow:y on various elements but they haven't had the desired effect. I'd like the index.html page to scale to display size, with the footer at the bottom (no x-axis scroll bar).

Please could someone save me from insanity! I'm guessing this has a simple remedy, I'm only using HTML / CSS. Thanks!

Example

Link to JSFiddle in the comments below.

htmlcss


Solution 1:[1]

The space is caused by the property "padding-bottom: 100%;" on "embed-container" (on row 238 in your stylesheet). Removing this property removes the gap completely.

Not quite sure what you mean by "in a responsive manner", but I hope this helped.

Solution 2:[2]

You have to remove in the class .embed-container these property padding-bottom: 100%;.

Solution 3:[3]

It is due to paddings and margins in your styles.

padding-bottom: 100% in .embed-container and margin:30px in .driver-quote, .summary classes. You need adjust the margins and paddings properly.

Sample Code I added. Sample Code

Solution 4:[4]

delete the padding-bottom: 100%;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Thedde
Solution 2 Maik Lowrey
Solution 3 Anil Talla
Solution 4 Sarout

Related Questions