CSS 100% height in the interior columns

UPDATE: http://jsfiddle.net/dSkJb/19/

To clarify, the footer should be at the bottom of the page, and the page should have 100% height at all times, so the middle row should adjust accordingly. Nothing should overlap the footer, and the footer shouldn’t overlap anything. Essentially, if you have a two row table with a 100% height, you’d accomplish this easily.

This is the issue, a div with 100% height that is inside a div with 100% and some text gets bumped down.


Is there a way to make the inner div’s height relative to its containing div’s height?

Original Post Below

I am trying to get two inner columns to have a 100% height, and not disturb the sticky footer. So far I have the sticky footer working in relation to a main container, but am struggling to match the height of #content, #col1, and #col2 to the height of the #container without loosing the sticky footer.

Different articles suggest using height: auto; height: 100%; and min-height (for ie6), but I find height: auto; to interfere with inner div heights. There are suggestions also for position: relative, floats, display: inline. Too many options?

Suggestions please :: http://jsfiddle.net/sandraqu/kDCTR/

Cross Browser Solution
for IE 8+. In theory though, you could use any method for getting the columns in the middle. I just used display: table;
and display: table-cell;
. But the wrapping div does not need to be display: table;
to work, so you can use float
tricks, or faux columns, or holy grail, or whatever you want and make it IE 6+ compatible. I’m just to lazy to implement any of those right now. The main goal has been accomplished, I’ll let you work on the specifics. :)

Hello, buddy!稿源:Hello, buddy! (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » CSS 100% height in the interior columns

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录