How to make content height touch the footer top with background colorand with one line content in it

Question

1.00/5 (1 vote)

See more:

HTML

<!DOCTYPE html>
<html>
<head>
<style>
html,body{height:100%;}
.wrapper{position:relative; min-height:100%;}
.header{height:100px; left:0;top:0; background-color:red;}
.content{background-color:blue;}
.footer{position:absolute;left:0;bottom:0; background-color:yellow;height:100px;}
</style>
</head>
<body>


<div class="wrapper">
<div class="header">
This is header
</div>
<div class="content">
This content <br>

</div>

<div class="footer">
this is footer
</div>

</div>

</body>
</html>

What I have tried:

i tried to keep

CSS

.content{
bottom:0; || padding-bottom:100px; || margin-bottom:0px;
background-color:blue;
}

Posted 27-Mar-16 17:06pm

Waheed Mohammed

Updated 31-Mar-16 18:02pm

Patrice T

v2

Add a Solution

2 solutions

Solution 1

Try this

HTML

<!DOCTYPE html>
<html>
<head>
<style>
html {height:100%}
 body{height:100%;  position:relative;} 
.header{position:absolute; height:100px; width:100%; left:0;top:0; background-color:red;}
.content{   height:100%;width:100%; background-color:blue; padding-top:110px; color:white;}
.footer{position:absolute;left:0;bottom:0; background-color:yellow;height:100px; width:100%;}
</style>
</head>
<body> 
		<div class="header">
		This is header
		</div>
		<div class="content">
		This content <br> 
		</div>
		 
		<div class="footer">
		this is footer
		</div>
 
 
 
</body>
</html>

Posted 27-Mar-16 19:39pm

Karthik_Mahalingam

Comments

Waheed Mohammed 28-Mar-16 4:52am

Thanks alot karthik ... i am from bangalore too.. thanks for ur help

Karthik_Mahalingam 28-Mar-16 4:53am

welcome, Electronic City :)

Waheed Mohammed 28-Mar-16 5:03am

what do u do karthik

Karthik_Mahalingam 28-Mar-16 5:27am

IT, S/W Engg

Waheed Mohammed 28-Mar-16 5:36am

great karthik... im a freelancer

Karthik_Mahalingam 28-Mar-16 5:38am

cool, i dont have much knowledge about freelancer, could you pls post me the details to my mail id
mtp.karthik@gmail.com

Waheed Mohammed 28-Mar-16 4:58am

But what about Wrapper.. if we include Wrapper than

Karthik_Mahalingam 28-Mar-16 5:04am

wrapper is not necessary. instead we are adding this body{height:100%; position:relative;}

Waheed Mohammed 28-Mar-16 5:02am

One more Problem is .. if u keep footer as Position:Absolute, than when we add more content to footer it overrides . does n0t push footer down

Karthik_Mahalingam 28-Mar-16 5:25am

body {
height: 100%;
margin-bottom: 100px;
}

.header{ height: 100px;background-color:red;}
.footer{ height: 100px; position: absolute; bottom: 0; background-color:yellow; width:100%}

try this..

Waheed Mohammed 28-Mar-16 5:29am

Doesnt work bro..still it over flows over footer .. footer doesnt move down

Karthik_Mahalingam 28-Mar-16 5:48am

do u need scroll bar for the content div?

Waheed Mohammed 28-Mar-16 5:55am

the content div should be flexible and as we add content to it it must push the footer down as well.. the code i have posted is okay but need the content div height should be till top of footer.. unaware of content size

Waheed Mohammed 28-Mar-16 5:37am

Actually the problem is http://www.dissertationwriting.co.in ... the content div of my page has left dissatisfaction.. planning to resolve it

Karthik_Mahalingam 28-Mar-16 6:08am

check this link
this might help you
http://stackoverflow.com/a/16568504/1147428

Waheed Mohammed 1-Apr-16 0:01am

Perfect Solution for this question i finally found
just keep
.header, .footer{height:20%;}
.content{min-height:80%;}

Karthik_Mahalingam 1-Apr-16 0:10am

Ok good :)

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Waheed Mohammed · Accepted Answer · 2016-03-31T18:00:00

Perfect Solution for this question i finally found
just keep
.header, .footer{height:20%;}
.content{min-height:80%;}

HTML

!DOCTYPE html>
<html>
<head>
<style>
html,body{height:100%;}
.wrapper{position:relative; min-height:100%;}
.header{height:20%; left:0;top:0; background-color:red;}
.content{background-color:blue;min-height:80%;}
.footer{position:absolute;left:0;bottom:0; background-color:yellow;height:20%;; width:100%;}
</style>
</head>
<body>
 

<div class="wrapper">
<div class="header">
This is header
</div>
<div class="content">
This content <br>
 
</div>
 
<div class="footer">
this is footer
</div>
 
</div>
 
</body>
</html>

How to make content height touch the footer top with background colorand with one line content in it

2 solutions

Solution 1

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us