Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to give a floating sidebar 100% height of its parent?

How to give a floating sidebar 100% height of its parent?

Problem

Here is my jsFiddle

I want a layout like above but I don't want to manually assign Height to my sidebar(as i am doing now). I want the sidebar height to be 100% respect to its parent element i.e content-area

my css

.content-area {
min-height: 310px;
background-color: #bbb;
}
.left-sidebar {
float: left;
width: 50px;
height: 310px;
background-color: #abcdef;
}
.right-sidebar {
float: right;
width: 50px;
height: 310px;
background-color: #abcdef;
}
Problem courtesy of: shubendrak

Solution

The problem is that min-height does not work the same way that height does, so as far as your sidebars are concerned the height is 0. You have two options:

1.) Specify a height on your container div and then set the sidebars to have a height: 100%. Here is the updated fiddle.

2.) Set your containing div to have position: relative and the sidebars to have position: absolute. This should allow the height: 100% to work with min-height. However, with this solution you cannot use the float property, so for your right sidebar you will need to set right: 0. Check out this fiddle for a working example.

Solution courtesy of: Default

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to give a floating sidebar 100% height of its parent?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×