CSS two columns - 100% height and 100% width
Check out my fiddle:
.content {
width: 70%;
height: 100%;
float: left;
bgcolor: #f8f4eb;
}
.sidebar{
width: 200px;
height: 100%;
float: left;
background: url(http://i.imgur.com/S0I0UaN.png) repeat left top;
}
I am trying to make a simple layout for personal use and learning purposes. Having tried this for over three hours now, this is the closest I can get. I need the sidebar background image to be 100% height. Also, I need the content width to be 100%.
Basically, the content of the div should be 100% at all times, and the sidebar background image can be fixed for anything that matters. But it should be 100% of the height.
Anyone who could point me in the right direction? Thank you very much in advance!
+3
source to share
1 answer
Check out this approach:
http://jsfiddle.net/uvk80oob/4/
... you can wrap the sidebar and content in a wrapper and use:
.wrap {
display:table;
height:100%;
}
.wrap > div {
display:table-cell;
height:100%;
}
+4
source to share