How do I remove this unwanted space which seems to be background repeating HTML/CSS


Tags: html,css,css3

Problem :

I was wondering if anyone could help me solve this issue I'm having regarding my gradient background repeating after the page has so much information on.

You can find the page @ http://joshscottonthe.net/AboutMe/ and if you scroll to the bottom you'll see there's a large amount of blank space, ideally I want to half that space at the bottom. I've noticed that when I go into chrome dev tools to inspect the code on that page there's an extra line of code which I've not added and can't find anything in any of my files both HTML and CSS. This code is the line

<div style="position: absolute; z-index: -10000; top: 0px; left: 0px; right: 0px; height: 1793px;"></div>

Both this line of code and the repeated background doesn't show on any of the other pages even if I add more content to the page to make the page longer so I'm assuming it has something to do with my "content" div which is responsible for the white box which holds the text on the "About Me" page.

/*Main content area with text boxes - Used For About & Assignment Pages 
content {
position: absolute;
width: 50vw;
height: 125vh;
left:0;
right:0;
top: 25vw;
border-radius: 2vw;
margin-bottom: 1vw;
margin-left:auto;
margin-right:auto;
background-color: #FFF;
-webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
}

Any thoughts & feedback would be greatly appreciated,

Many thanks, Josh



Solution :

In the .abouth1, .abouth2, abouth3 section of the page remove height: 100%;.

Set #content to height: 100%;

or

Set #content to height: 90%; to get it closer


    CSS Howto..

    HTML5 / CSS| How do I disable responsivity when a scroll bar appears?

    How to apply alternate background color for each column in CSS columns

    How to write a CSS hack for IE 11? [duplicate]

    How to apply jQuery on css selector :before [duplicate]

    How to change active link color in navigation bar

    how to solve in conflict css?

    How do you find the dimensions of a “display: none” element?

    Images not showing up in IE 9

    How to make pure CSS dropdown menu appear with a fade in/slowly

    CSS - 5 fluid columns with 6 fixed separators, how to get them to equal 100% of containing div?

    How do I style all anchor tags inside a certain div?

    css float: left clash/collision, how to avoid?

    joomla, CSS - show joomla module only for smartphone screens

    How to change qunit theme / layout

    How to define multiple CSS attributes in JQuery?

    How to center SVG within its container?

    How to position a background image without background-position property

    How come my divs are jumping around during a transition?

    How to activate a CSS3 (webkit) animation using javascript?

    How can I use external HTML form in Joomla site?

    on hover and on click how to fade out image and fade in content text

    How to position a css radial gradient to the top left responsively?

    when click on button then show message

    How can I make my wrapper
    vertically centered and responsive?

    How to animate selection / deselection in ace editor?

    css3 pure: how to hover an element outside?

    How to reload CSS after ajax call

    how to apply css to extjs grid emptytext?

    How to position main content below header and footer in css

    How do you override “-moz-user-select: none;” on a child element?