Menu
I want to design a structure for a web page but I have a problem that I can't sole it. This is what I want:
a web page with 3 parts:
1-header
2-content( has 2 parts, a sidebar and a content section)
3-footer
and I want these characteristics:
1- if in the content section there is nothing then footer stays at the bottom, if we have content, footer pushes down and stays after my content
2- my sidebar(exist in the content section) take 100% height of content section and connects to footer
like this:
I build this with this code and it works, but my problem is that if contents of sidebar area gets bigger, sidebar and main content area overlaps footer! I want that in this situation, footer stays after my content.
I use Twitter Bootstrap for my work. I don't want to use methods that are available only in the new browsers. at least IE 9.
this is my code:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container-fluid">
<div class="row header">
<div>header</div>
</div>
<div class="row content">
<div class="col-lg-2 sidebar">
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
</div>
<div class="col-lg-10">content</div>
</div>
<div class="row footer">
<div>footer</div>
<div>footer</div>
<div>footer</div>
<div>footer</div>
<div>footer</div>
</div>
</div>
and this is CSS:
body,html{
height: 100%;
}
.container-fluid {
height:100%;
}
.header{
background-color: #ccff55;
}
.content{
background-color: #445566;
height: -webkit-calc(100% - 10%);
}
.sidebar{
background-color: #446655;
height: 100%;
}
.footer{
background-color: #11ff99;
}
569
You can use a js method I wrote that will help you fixing the header at bottom of the page:
<script type="text/javascript">
window.onload = function(event) { resizeDiv(); }
window.onresize = function(event) { resizeDiv(); }
function resizeDiv() {
vpw = $(window).width();
vph = $(window).height()-54;
$('#main').css({'height': vph + 'px'});
$('.container').css({'height': vph + 'px'});
$('.sidebar').css({'height': vph + 'px'});
}
</script>
Adapt 54 to the height of your footer. Then if you add to your css:
.container{
overflow: scroll;
}
.sidebar{
overflow: scroll;
}
your footer will be always visible on the bottom of the screen. Else, the footer will go further down when the content of the container will be bigger then what is set by js. Don't forget to set in your document.ready function a call to resizeDiv(); to use it when you load the page.
$(document).ready(function(){
resizeDiv();
});
Using JS you will have no issues on all the browsers and even in old versions.
104
It's overlapping because your .content element has a height calculation 10% less than the body height. This allows the footer to creep up, causing the overlap.
Your content will always be where it is now because you have nothing in the CSS to create the page that will make .content and the sidebar sit side-by-side, such as using float and sizing the elements.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
