CSS Fluid Layout?
I have a quick question about to how setup my basic fluid layout. I have one 40px high, and 100% wide header bar at the top, this looks great.
Then i have a #left and #right div, each floated respectively. This looks cool. They both have height 100% which works great but the issue is the page then scrolls 40px down, because there is the 40px from the header bar... if i use a fluid layout for the header and then the content box's it would look awful on a tiny or very开发者_如何转开发 large resolution.
Any ideas?
Here is my CSS
body
{
background: #ebebeb;
margin: 0;
padding: 0;
min-width: 750px;
max-width: 1500px;
}
#wrap
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#header
{
background: #414141;
height: 40px;
width: 100%;
}
#sidebar
{
width: 30%;
background: #ebebeb;
height: 100%;
float: left;
}
#rightcontent
{
width: 70%;
background: #fff;
height: 100%;
float: right;
}
#footer
{
width: 100%;
background: #414141;
height: 40px;
clear: both;
}
And here is my html page:
<body>
<div id="wrap">
<div id="header">
head
</div>
<div id="sidebar">
side
</div>
<div id="rightcontent">
right
</div>
<div id="footer">
footer
</div>
</div>
</body>
Does that help :)
height: 100%; is a tricky thing for web pages, as you are no doubt keenly aware. Looking at your code in Firefox 3.5.7 the #sidebar and #rightcontent columns only have only the height of about an em — just enough to hold the text you put in them, not the full page length I think you were hoping for. The columns are trying to calculate percent height from the explicit height of their parent, but #wrap also has a %-based height, which causes this to fail (at least in my Firefox).
Now, as you've described it (the columns being the right height, except for an extra 40px scroll) what seems to be happening is that whatever browser you're using is passing the full height of #wrap as 100% of it's parent, which is <body>. So naturally, when your columns are sized to the height of <body>, which also encloses the height of your header and footer, the columns are too tall.
A trick I've used a couple of times to achieve the full page length appearance of columns that scales appropriately to whatever page dimension is to stick a position: fixed; bottom: 0px; <div> tag at the bottom of my page with just enough markup inside it to mimic the structure and relevant CSS of the columns.
Here's what I did to your page to get this effect:
<!--Add this to your HTML-->
<div id='columnfooter'>
<div id='sidecont'></div>
<div id='rightcont'></div>
</div>
/* And modify your CSS like this */
#sidebar, div#sidecont {
width: 30%;
background: #ebebeb;
float: left;
}
#rightcontent, div#rightcont {
width: 70%;
background: #fff;
float: right;
}
div#rightcont, div#sidecont {
height:100%;
}
#footer {
width: 100%;
background: #414141;
height: 40px;
position: relative;
bottom: 0px;
}
div#columnfooter {
position: fixed;
z-index: -25;
bottom: 40px;
height: 100%;
background: #ebebeb;
width: 100%;
}
Yes, using the HTML to form empty background columns this way does kind of mix semantic and stylistic markup — a technical no-no. But the CSS is clearly abstracted from the HTML, and with this code I have full page columns, #footer at the bottom (even when more than a page of content is added to either column above it), and it behaves the same in the latest versions of Firefox, Safari, Opera, Chrome and IE8 at any resolution (tested down to 800x600).
Hope this helps!
加载中,请稍侯......
精彩评论