CSS 100% height in the interior columns

综合技术 2017-12-31

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. 🙂


CSS stylesheet for Opera, Safari and Chrome only I'm using such code which works great on IE and Firefox: .tytulmalykom { color:#666666; font-size:11px; font-variant:small-caps; } ...
A clarification needed to solve drop down meny ove... I have customized one banner and one drop down menu. On mouse over the menu drop down menu appears. If i scroll this menu is not going below the banne...
亲历中国CSS开发者大会 2018年4月18日 三个星期前,我有一次非常兴奋的经历——在3月31厦门召开的中国第四届CSS开发者大会上,我第一次做了中文发言。 我从这次的经历中学到了很多东西——既包括关于我自己的,也包括中国发展景象的——我想在这里,把我学到的东西与你们分享。 我先来介绍一下两位组织者。 ...
The left float does not work in my footer&comm... I am testing out a footer on one of my pages so that I can put it on every page but it does not display properly. Currently, the div's in the footer d...
Why do JS frameworks use inline styling instead of... Looking at various JS frameworks (Dojo, Ext.JS, and others) i have observed that layouting is often, if not always, done via direct DOM manipulation, ...