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

    How to create the block with round corners, which consists of three parts: top, content, bottom?

    How to add a style only to certain elements of a list via CSS

    How to edit a css file in ASP.NET using C# to change the website design

    How to make some controls visible and overlapping a DIV when mouse hovers on it? [closed]

    How to align arrows using CSS or jQuery or JavaScript [closed]

    CSS - How do I get my list element to fill 100% of the block

    How to make content of invisible except for the left column?

    How to write Text in css like show in images?

    How to shift a background image with css

    How can I set a height of document [duplicate]

    how to make html email look exactly the same as previewed just in browser?

    How to expand text to full DIV width

    How to override a link tag with another in css

    How to preserve margins and expand a div to fit its contents size?

    How to add a color overlay to a background image?

    How to correct Div overlapping?

    How to add image, that overlapping Bootstrap modal?

    How can add atribute to css of page on page load event

    How to add “android_asset/www/” to the image's path in the CSS only if app is running in Android?

    Couldn't understand CSS selectors meaning in the juizy slideshow stylesheet code

    How to float Dojo DropDownMenu over a table cell

    How make text before ul to come in single line in html?

    How to give menu sub menu options

    How to remove space between two buttons in a table row or “column”?

    How to position a div in laravel with inline css [closed]

    how to find a class and apply a style with jquery?

    How to set custom fonts in JavaFX Scene Builder using CSS

    How to make text appears alitter above using html and css

    How to keep the top div height fixed and bottom div height in %age

    CSS - how to overwrite using CSS?