100% container height issue - HTML5 / CSS2/3
Simple problem, though apparently not a simple solution.
Example here: http://myhideout.eu/new/
Basically the site consist of two columns, though with no wrappers or anything like it, as I'd really like to do with as little of the sort as possible, partly for the sake of simplicity, but also to make use of the HTML5 semantics, which in my mind don't really include divs, no matter how appropriately they are be named.
However, I'd like to have the sidebar fill up the full height of the adjacent column, which is not as easy as I first thought it would be. I know it's an old problem, but I was sure I had solved it before.
Anyhow, I tried to figure out how to do it without using wrappers or JavaScript. JavaScript is a no go, but that's another story. I was sure that there would be some sort of smart CSS3 feature or something similar, that would solve my problem, without the need for wrappers, but my search for this much need feature was a failure of epic proportions.
So I said to my self: "Damn it! Oh well, just have to use wrappers then."
I was sure it would work. I tried different configurations, but no matter what I did, I couldn't get it to work without setting an absolute height of the surrounding wrapper. Just imagine my disappointment, failing once again when I was sure I had done it before. So again I went searching for a solution to suit my needs. Though a lot more material turned up this time, it was still a failure. The few solutions I found was questionable to say the least.
So, now I'm here again, asking yet another one of those questions which undoubtedly have been asked a quadrillion times before. I am sorry about this, but I really don't know where else to go.
I do hope you can help.
Thanks in advance and best regards.
edit:
This works exactly as I want it too:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0 auto;
width: 800px;
}
#wrapper {
position: relative;
width: 800px;
}
body > header, body > footer {
background-color: red;
width: 800px;
}
#wrapper > article {
margin-right: 200px;
width: 600px;
background-color: blue;
}
#wrapper > aside {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 200px;
background-color: green;
}
</style>
</head>
<body>
<header>This is a header</header>
<div id="wrapper">
<article>
This is the content<br /><br /><br /><br />left<br /><开发者_开发百科br /><br /><br />left
</article>
<aside>
And this is the sidebar! I dynamically make myself bigger based on the content on the left!
</aside>
</div>
<footer>This is a footer</footer>
</body>
</html>
Only problem left is getting rid of that damn div tag ;)
edit: the css table display properties have been pointed out to me, and it really seems to be what I'm looking for, as the smart solution, but with multiple elements in one row, and only one in the other, I can't figure out how it should be done.
If IE6 compatibility is not a requirement, then I usually will usually do the following html:
<div class="container">
<div class="content">
This is the content
</div>
<div class="sidebar">
And this is the sidebar! I dynamically make myself bigger based on the content on the left!
</div>
</div>
And this is the CSS:
.container { position:relative; }
.content {margin-right:<SIDEBAR WIDTH HERE>;}
.sidebar {position:absolute; top:0; bottom:0; right:0; width:???; }
JSFiddle example: http://jsfiddle.net/geC3w/
This works in all modern browsers and Internet Explorer 7 and above, it's also immensely simple, as long as IE6 compatibility isn't a requirement
If IE7 compatibility is not a requirement, use display: table-cell;:
body {
margin: 0 auto;
width: 800px;
}
#wrapper {
position: relative;
width: 800px;
}
body > header, body > footer {
background-color: red;
}
#wrapper > * {
display: table-cell;
}
#wrapper > article {
width: 600px;
background-color: blue;
}
#wrapper > aside {
width: 200px;
background-color: green;
}
Working example.
加载中,请稍侯......
精彩评论