How do I force my column to always stretch to the bottom of the page?
I need my content column to expand to the bottom of the 开发者_运维知识库page when it's content is shorter than the viewport, but still expand when the content is longer. The column has to come down a little ways from the top of the page.
Here is the HTML for what I described:
<html>
<body>
<div id="content">
<p> asdf ghjkl </p>
</div>
</body>
</html>
Here is the CSS
#content {
min-height: 100%;
margin: 100px 0 0;
}
The issue with this method though is that min-height: 100%; does not take padding into account so the page is always bigger than what I want.
This is the behavior I am seeking:
Is there any way to accomplish this without using Javascript?
Absolute positioning can do this for you:
First remove your min-height and margin then apply this rule to your CSS.
#content {
position: absolute;
top: 100px;
bottom: 0;
}
In CSS3, you can use box-sizing
By setting it to
border-box, you can force the browser to instead render the box with the specified width and height, and add the border and padding inside the box.
Ok blokes and birds, here's what I ended up doing. Instead of solving the problem directly, I added a few fixer divs.
First off, here are a few observations:
We know that when
#columnis longer than the viewport, the length of#columnneeds to specify the height of<body>.If
#columnis shorter than the viewport, the height of the viewport needs to specify the height of<body>.The column needs stretch to the bottom of the page under all circumstances, regardless of how long it's content is.
For the first criteria we need to make sure that height: auto is set on <body>. Height defaluts to this if it's not set. We also need to make sure that #column has height: auto; and overflow: hidden; so that it expands to the size of it's content.
For the second criteria we need to set position: absolute; and min-height: 100%; on <body>. Now the length of <body> will expand when #column is longer than it, but won't go shorter than the viewport. This next part is where the fix comes in.
For the third criteria, the trick is to add some extra divs and give them some special css. In my HTML I added two divs right outside of #column.
<div id="colhack-outer">
<div id="colhack-inner">
</div>
</div>
<div id="column">
...
</div>
For the outside div you postiion it absolutely and set it's height to 100%, force it to use an alternative box model and shift it's content area using padding. You apply all your column styling (background color, border radius, shadow, etc.) to the inner div. Here is the CSS I applied to them:
#colhack-outer {
height: 100%;
padding: <where you want to shift the column to>;
position: absolute;
width: 50%;
}
#colhack-inner {
height: 100%;
width: 100%;
background-color: #303030;
}
You also have to make your actual content container use that special box model and shift it with padding too:
#contentbox {
position: relative;
padding: <where you want to shift the column to>;
width: 50%;
color: #EEEEEC;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Live example here: http://nerdhow.net/
post a comment if you have questions or if something wasn't clear.
You can achieve it by using Absolute positioning and adding extra block (if you need a solid background under you column).
- So, when you'll have a little content, you'll get http://jsfiddle.net/kizu/7de7m/
- And if you'll have a lot of content, you'll get http://jsfiddle.net/kizu/7de7m/3/
Try this jsFiddle: http://jsfiddle.net/8R4yN/. It seems to work the way you want. I took some tips from: http://www.tutwow.com/htmlcss/quick-tip-css-100-height/. It looks like the overflow is causing the hiding, and the #content inside there is also not helping out :).
加载中,请稍侯......
精彩评论