CODEWITHSUNDEEP
htmlcss
danny bee
danny bee

Reputation: 870

How to keep footer down

This is my code:

html,body,ul,li {
margin:0;

}


#container {
padding-left:5px;
height:100%;
}

#mainMenu {
 font-family:Arial, Times, sans-serif;
 list-style-type:none;
 padding-right:30px;
 
} 

#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;

}

#mainMenu a:hover {
color:Teal;

}

#menu {
text-align:right;
width:inherit;
height:50px;
background-color:paleGoldenRod;
position:relative;
left:0;
top:0;


}
li {
display:inline;
}


th, td {
text-align:center;
border:1px dashed grey;
width:90px;
height:40px;
}
.formText {
margin:10px 0px;
}
footer {
background-color:SlateGray;
width:100%;
height:100px;
position:relative;
bottom:0px;
left:0px;



}
<!DOCTYPE html>

<html>
  <head>
  <title>Contact Me</title>
  <link href="C:\Users\dan\Desktop\Table Generator Website\style.css" rel="stylesheet" type="text/css">
  </head>

  <body>
    <div id="menu">
      <ul id="mainMenu">
	    <li><a href="C:\Users\dan\Desktop\Table Generator Website\index.html">HOME</a></li>
	    <li><a href="C:\Users\dan\Desktop\Table Generator Website\About\index.html">ABOUT</a></li>
	    <li><a href="C:\Users\dan\Desktop\Table Generator Website\Contact\index.html">CONTACT ME</a></li>
	  </ul>
    </div>	
<div id="container">	
    <h2>Contact Me Directly</h2>
   
    <form>
	  <label>Full Name:</label><br> <input type="text" name="name" class="formText"><br>
	  <label>Your Age:</label><br> <input type="text" name="age" list="ageList" class="formText"><br>
	  <datalist id="ageList">
	  <option value="18">
	  <option value="19">
	  <option value="20">
	  <option value="21">
	  <option value="22">
	  </datalist>
	  <label>E-Mail:</label><br> <input type="text" name="e-mail" class="formText"><br>
	  <label>Your Message</label><br><textarea rows="5" cols="50" class="formText"> </textarea><br>
	  <textarea></textarea>
	  
	  <input type="submit" value="Submit">
	
	
	</form>
	</div>
	   <footer>
	  <p>This website </p>
	</footer>
 
  </body>

</html>

I would like my footer to always be at the bottom of the page according to the content displayed in the page. I don't want to use position:absolute because some pages have more content and position:absolute just makes the content hide behind the footer.

How can I keep the footer always at the bottom of the page without position:absolute? or is there a way to use position:absolute but still make the page scroll down according to the displayed content

Upvotes: 0

Views: 197

Answers (4)

lalit bhakuni
lalit bhakuni

Reputation: 627

you can use this code for position fixed : 

 footer {
    background-color: SlateGray;
    bottom: 0;
    height: 100px;
    left: 0;
    position: fixed;
    width: 100%;
}

Upvotes: 0

Kamrujaman Shohel
Kamrujaman Shohel

Reputation: 39

Apply position: fixed. rather than using position: relative. Your problem will be solved.

Upvotes: 1

Majid Parvin
Majid Parvin

Reputation: 5002

Just change footer style to this:

 footer {
      background-color:SlateGray;
      height:100px;
      position:fixed;
      bottom:0;
      left:0;
      right:0;
}

Upvotes: 4

BizedKhan
BizedKhan

Reputation: 644

Apply position: fixed on footer.

footer{position: fixed; background-color:SlateGray;width:100%;height:100px;bottom:0px;left:0px;
}

Upvotes: 1

Related Questions