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

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

<header> </header>
<div class="content-area">
<div class="left-sidebar"></div>
<div class="main-area"></div>
<div class="right-sidebar"></div>
</div>
<footer> </footer>

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;
}

Answers


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.


.right-sidebar { float: right; width: 50px; height: auto; background-color: #abcdef; position:relative;}

Try this ... Is this what you're shooting for?


give height property to the ".content-area" class and then apply 100% height to the sidebar. for ex:

.content-area {
min-height: 310px;
background-color: #bbb;
height: 500px;
}
.left-sidebar {
float: left;
width: 50px;
height: 100%;
background-color: #abcdef;
}
.right-sidebar {
float: right;
width: 50px;
height: 100%;
background-color: #abcdef;
}

Need Your Help

NSLocalizedString is not returning the localized text XCode4

osx cocoa localization nslocalizedstring

After creating new cocoa application,I have added localization string files localizeFile.strings(English) and localizeFile.strings(Spanish)

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.