CODEWITHSUNDEEP
htmlcss
aziz
aziz

Reputation: 336

sticky footer inside tow div

I am trying to make a sticky footer that always stay at the bottom. But my footer is not direct child of the first div, its the second child. Like This https://jsfiddle.net/bduswush/

<div id="outer-wrap">
    <div id="inner-wrap">
        <div class="head">This is head</div>
        <div class="content">This is body</div>
        <div class="footer">This is footer</div>
    </div>
</div>

But the problem is here - it does not take the full height of device screen and content div is overlapped by the footer. I want to left the footer height auto. Is there any solution?? Thanks in advance.

Upvotes: 3

Views: 218

Answers (1)

Francisco Romero
Francisco Romero

Reputation: 13199

You have to set a height and width to html and body tags.

html,body{
  height: 100%;
  width: 100%;
  border: 0;
}


html,body{
  height: 100%;
  width: 100%;
  border: 0;
}
#outer-wrap {
	height: 100%;
  background: #ccc;
}
#inner-wrap {
	min-height: 100%;
	position: relative;
  background: #00b;
}
.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
  background: red;
}
<div id="outer-wrap">
		<div id="inner-wrap">
			<div class="head">This is head</div>
			<div class="content">This is body</div>
			<div class="footer">This is footer</div>
		</div>
</div>

This is because when you use height and width with percentages, it take its value from its parent so if you do not set a value to the height and width of its parent it cannot fill the space required.

Upvotes: 2

Related Questions