Solved

How can I get rid of the extra space at the bottom of my page?

Posted on 2014-11-11
9
141 Views
Last Modified: 2014-11-12
Attached is a screen shot of a page I'm working on and the CSS and HTML are below.

Where you see the arrow pointing to the lower right hand corner of the page - I want to get rid of that space and I don't know how. Ultimately, I want 100% of the height of the screen to be just that and not 100% plus a mystery supplement that I can't account for.

Where is that extra space coming from and how can I get rid of it?

Here's my CSS:

html, body {
height:100%;
width:100%;
margin:0px;
font-family:Arial;
size:11pt;
color:#000000;
}

 #header {
width:100%;
height:109px;
position:absolute;
background-image:url(../images/background.png);
background-repeat:repeat-x;
 }
 
#header_image {
width:1199px;
height:109px;
position:relative;
background-image:url(../images/header.png);
 }
 
 #side_nav {
position:relative;
float:left;
width:190px;
height:100%;
padding-left:10px;
background-image:url(../images/sidebar_background.jpg);
background-repeat:repeat-y
 }
  
 #mainContent {
width:1000px;
height:100%;
position:relative;
margin-left:200px;
 }
 
 #footer {
 width:100%;
 height: 35px;
 background-color:#000000;
 }


 a.side_nav {
color:#000000;
font-size:10pt;
text-decoration:none;
} 

 a.side_nav:hover {
color:#000000;
font-size:10pt;
text-decoration:underline;
} 

 a.side_nav:visited {
color:#000000;
font-weight:bold;
font-size:10pt;
text-decoration:none;
} 

Open in new window


..and here's my HTML:

<!DOCTYPE html>
		<html lang="en">
		<head>
		<title>dashboard</title>
		<link href="styles/style.css" rel="stylesheet" type="text/css" />
		<meta http-equiv="X-UA-Compatible" content="IE=100" /><meta name="viewport" content="width=device-width" /><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Expires" content="-1" /><meta charset="utf-8" />
		</head>
		<body>
			<div id="header"></div>
			<div id="header_image"></div>
				<div id="side_nav">
					<br><a href="home.php" class="side_nav">home</a>
				</div>
			<div id="mainContent">
		<br><b>home</b><br><br>This is the beginning of my tool...
			</div> <!-- close mainContent -->

			</body>
		</html>

Open in new window


What do you think?
0
Comment
Question by:brucegust
  • 5
  • 4
9 Comments
 

Author Comment

by:brucegust
ID: 40435356
Here's the screenshot...
screenshot.png
0
 
LVL 5

Expert Comment

by:meb_santoso
ID: 40435371
remove height:100%; from the html, body {} (line 2 of your CSS)

see: http://jsfiddle.net/kpuy00nw/
0
 

Author Comment

by:brucegust
ID: 40435777
Meb, when I do that, I get this:

screenshot
In other words, when I eliminate the 100% dynamic from my html / body tag, my sidebar quits right after the "home" menu option.

Is there a way to get my content and my menu to occupy the entire page AND still have the overall result not bleed over into an additional 120 pixels?
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 5

Expert Comment

by:meb_santoso
ID: 40435806
I think you can read this and apply the same approach: http://alistapart.com/article/fauxcolumns (i.e. use a background image to "fill" the body and thus creating a visual separation between your sidebar and content area.)
0
 

Author Comment

by:brucegust
ID: 40436124
Meb!

We're there except for one thing...

I've got my footer running along the bottom, but I can't get the "internal" divs to extend to the bottom of the page. Anytime I try to change something from min-height to height, I lose my effect with the footer.

So...

What can I do to get my background image on my sidebar menu to run down the length of the page instead of stopping short like it is in the attached screenshot?

What do you think?
almost-there.png
0
 

Author Comment

by:brucegust
ID: 40436128
Here's my CSS:

html, body {
width:100%;
height:100%;
margin:0px;
font-family:Arial;
size:11pt;
color:#000000;
background-color:#ffffff;
}

#wrap {
min-height:100%;
}

 #header {
width:100%;
height:109px;
position:absolute;
background-image:url(../images/background.png);
background-repeat:repeat-x;
 }
 
#header_image {
width:1199px;
height:109px;
position:relative;
background-image:url(../images/header.png);
 }
 
 #side_nav {
position:relative;
float:left;
width:190px;
height:100%;
padding-left:10px;
padding-bottom:35px;
background-image:url(../images/sidebar_background.jpg);
background-repeat:repeat-y;
 }
  
 #mainContent {
width:1000px;
min-height:100%;
position:relative;
overflow:auto;
background-color:#cccccc;
margin-left:200px;
padding-bottom:35px;
 }
 
 #footer {
 width:100%;
 height: 35px;
 margin-top:-35px;
 background-color:#000000;
 }


 a.side_nav {
color:#000000;
font-size:10pt;
text-decoration:none;
} 

 a.side_nav:hover {
color:#000000;
font-size:10pt;
text-decoration:underline;
} 

 a.side_nav:visited {
color:#000000;
font-weight:bold;
font-size:10pt;
text-decoration:none;
} 

Open in new window


Here's my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<title>dashboard</title>
<link href="styles/style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=100" /><meta name="viewport" content="width=device-width" /><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Expires" content="-1" /><meta charset="utf-8" />
</head>
<body>
	<div id="wrap">
		<div id="header"></div>
		<div id="header_image"></div>
			<div id="side_nav">
				<br><a href="home.php" class="side_nav">home</a>
			</div>
			<div id="mainContent">
			<br><b>home</b><br><br>This is the beginning of my tool...
			</div> <!-- close mainContent -->
	</div>
	<div id="footer"></div>
</body>
</html>

Open in new window

0
 
LVL 5

Accepted Solution

by:
meb_santoso earned 500 total points
ID: 40436838
Try this:
Move these lines: (line 37-38)

background-image:url(../images/sidebar_background.jpg);
background-repeat:repeat-y;

to the html {} part.

Meaning: draw the sidebar background image and repeat it vertically anyways, disregard any body length,
0
 

Author Comment

by:brucegust
ID: 40437897
Meb!

You, sir, are a genius!

I have googled this up and down and was repeatedly coming up with counsel that basically said you're obligated to conform to the dimensions of your parent div, hence what I was attempting was looking pretty impossible.

Never thought to make the side bar part of the html div! Look at that! Works great!

Thanks so much!
0
 
LVL 5

Expert Comment

by:meb_santoso
ID: 40437922
I don't know about being a genius, but many thanks for the points :-)

It is actually a very old technique, originating from <html background="image.jpg">, etc...

It has been years that i don't use this kind of method since the design world evolved oh so quickly.

Should you have build a page with more content, i would suggest that you go back to your original css scenario and use fluid instead of fixed widths and heights. You'll get my point eventually :-)
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Overlap photo won't go all the way to the right 1 23
Target h5 of a div 3 22
Css regex 6 38
Override MS CSS in SharePoint Online Modal Form 19 40
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question