Need Help With My First Site - Topic

Member

Posts: 18,791

Joined: Dec 13 2011

Gold: Locked

Warn: 20%

May 29 2014 03:29pm

Ok so I want my footer to stick to the bottom of the page, which i did and is working the way it should.

Now i want my content area to fill to the footer, currently is it not so there is a big gap between the 2.

Im using a column layout.

Header on top
nav on left side
content on right side, fills from nav to the end of the right side.
footer at bottom of screen

the content needs to fill to the footer.

heres the css

Code

#wrapper {
background-color: #000000;
width: 80%;
min-width: 720px;
margin: 0 auto;
min-height: 100%;
position: relative;
height: 100%;
}

header {
background-color: #003300;
color: #00205D;
padding: 10px 10px 10px 155px;
}

nav {
float: left;
width: 150px;
font-weight: bold;
letter-spacing: 0.2em;
text-align: center;
}

#content {
padding: 10px;
padding-bottom: 60px;
overflow: auto;
background-color: #000fff;
}

footer {
position: fixed;
bottom: 0;
height: 60px;
padding: 10px;
background-color: #869dc7;
clear: both;
width: 80%;
min-width: 720px;
}

body {
background: url('images/background.gif') no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
min-width: 720px;
margin: 0;
padding: 0;
height: 100%;
}

heres the html

Code

<!DOCTYPE html>
<html lang="en">

<head>
<title>Diablo 3 RoS Builds</title>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
</head>

<body>

<div id="wrapper">

<header>
<img src="images/diablo.gif" height="150" width="350" alt="Diablo 3 Uber Builds">
</header>

<nav>
<a href="index.html">Home</a>
</nav>

<div id="content">
<p>asdasdasdasadasdad</p>
</div>

<footer>
</footer>

</div>

</body>

</html>

val4321

Member

Posts: 1,945

Joined: Apr 19 2007

Gold: 1,978.90

May 29 2014 03:47pm

Code

<!DOCTYPE html>
<html lang="en">

<head>
<title>Diablo 3 RoS Builds</title>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">

<style>
#wrapper {
width: 80%;
min-width: 720px;
margin: 0 auto;
min-height: 100%;
position: relative;
height: 100%;
}

header {
background-color: #003300;
color: #00205D;
width: 100%;
height: 150px;
position: relative;
}

nav {
float: left;
width: 15%;
font-weight: bold;
letter-spacing: 0.2em;
text-align: center;
min-height: 150px;
background-color: red;
}

#content {
padding-bottom: 60px;
overflow: auto;
background-color: #000fff;
float: left;
height: 100%;
width: 85%;
}

footer {
position: fixed;
bottom: 0;
height: 60px;
padding: 10px;
background-color: #869dc7;
clear: both;
width: 80%;
min-width: 720px;
}

body {
background: url('images/background.gif') no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
min-width: 720px;
margin: 0;
padding: 0;
height: 100%;
}

body, html {
height: 100%;
}
</style>
</head>

<body>

<div id="wrapper">

<header>
<img src="images/diablo.gif" height="150" width="350" alt="Diablo 3 Uber Builds">
</header>

<nav>
<a href="index.html">Home</a>
</nav>

<div id="content">
<p>asdasdasdasadasdad</p>
</div>

<footer>
</footer>

</div>

</body>

</html>

Invested

Member

Posts: 18,791

Joined: Dec 13 2011

Gold: Locked

Warn: 20%

May 29 2014 05:20pm

Ok, So I used the code above and got it to work almost the way I want it, Now i just need the max height to end at the top of the footer. Right now i am getting a scroll bar and can scroll up/down a little bit.

How can i fix it.

I am just quickly going trough this right now, will be trying more later when i get home from work.

Code

#wrapper {
width: 80%;
min-width: 720px;
margin: 0 auto;
min-height: 100%;
position: relative;
height: 100%;
}

header {
background-color: #003300;
color: #00205D;
height: 150px;
padding: 10px 10px 10px 155px;
position: relative;
}

nav {
float: left;
width: 15%;
font-weight: bold;
letter-spacing: 0.2em;
text-align: center;
min-height: 40%;
background-color: red;
overflow: auto;
height: 80%;
}

#content {
overflow: auto;
background-color: #000fff;
height: 90%;
float: left;
width: 85%;
}

footer {
position: fixed;
bottom: 0;
height: 10%;
background-color: #869dc7;
clear: both;
width: 80%;
min-width: 720px;
}

body {
background: url('images/background.gif') no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
min-width: 720px;
margin: 0;
padding: 0;
height: 100%;
}

html {
height: 100%;
}

This post was edited by Invested on May 29 2014 05:32pm

Go Back To Programming & Development Topic List