CSS 100% 内列高度
更新： http://jsfiddle.net/dSkJb/19/
为了澄清，页脚应位于页面底部，并且页面始终应具有 100% 的高度，因此中间行应相应调整。任何内容都不应与页脚重叠，页脚也不应与任何内容重叠。本质上，如果您有一个高度为 100% 的两行表，您就可以轻松完成此任务。
这就是问题所在，高度为 100% 的 div 位于高度为 100% 的 div 内，并且一些文本被向下碰撞。
http://jsfiddle.net/sandraqu/dSkJb/8/
有没有办法内部 div 的高度相对于其包含的 div 的高度？
下面的原始帖子
我试图让两个内部列具有 100% 的高度，并且不干扰粘性页脚。到目前为止，我已经使粘性页脚与主容器相关，但我正在努力将 #content、#col1 和 #col2 的高度与 #container 的高度相匹配，而不会丢失粘性页脚。
不同的文章建议使用 height: auto;高度：100%；和 min-height （对于 ie6），但我发现 height: auto;干扰内部 div 高度。还有关于位置的建议：相对、浮动、显示：内联。太多选择？
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.
http://jsfiddle.net/sandraqu/dSkJb/8/
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/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
适用于 IE 8+ 的跨浏览器解决方案。但从理论上讲，您可以使用任何方法将列置于中间。我刚刚使用了
display: table;和display: table-cell;。但是包装 div 不需要display: table;才能工作，因此您可以使用float技巧，或人造列，或圣杯，或任何您想要的使其兼容 IE 6+。我现在只是懒得实施其中任何一个。主要目标已经完成，接下来就让你来处理具体的事情吧。 :)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;anddisplay: table-cell;. But the wrapping div does not need to bedisplay: table;to work, so you can usefloattricks, 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. :)首先，我不确定在这种情况下“粘性页脚”是什么意思。粘性页脚通常是在页面的其余部分滚动时粘在适当位置的东西。但是，您的示例似乎将页脚“粘贴”到容器的底部，而不是视口的底部。这是正确的行为吗？
其次，根据您想要如何处理它，“100% 高度”列有几个选项：
1) Fake It
使用看起来像您想要的列的背景图像。沿着
body、您的container或您的content重复它，具体取决于您想要的样式。请参阅A List Apart - Faux Columns或Google“CSS Faux Columns”了解更多信息。如果您想要一个真正的粘性页脚，这是最好的解决方案。
2) 定位元素
将
position:relative添加到contentdiv 中，并添加position:absolute; height: 100%;到内容较少的列。包含更多内容的列将用于增加content元素的高度。另请注意，您可能需要为内容较多的列添加边距，以将其远离内容较少的列。这应该允许您的列一直推到页脚。如果您的页脚应该位于容器的底部，而不是位于视口的底部，那么这是更好的解决方案。
有关此技术的更多详细信息，请参阅我的 jsFiddle。
First, I'm unsure what you mean by "sticky footer" in this case. A sticky footer is usually something sticks in place while the rest of the page scrolls. However, your example seems to "stick" the footer to the bottom of the container, rather than the bottom of the viewport. Is this correct behavior?
Second, depending on how you want to handle it, there are a couple options for "100% height" columns:
1) Fake It
Use a background image which looks like the columns you want. repeat it along the
body, yourcontainerOR yourcontent, depending on how you want it styled. Please see A List Apart - Faux Columns or Google "CSS Faux Columns" for more information.This is the best solution if you want an actual sticky footer.
2) Position your elements
Add
position: relativeto yourcontentdiv, andposition: absolute; height: 100%;to the column which will have less content. The column that will have more content will serve to increase the height of yourcontentelement. Also note that you may want to add a margin to the column with more content, to push it away from the one with less content.This should allow your columns to push all the way to the footer. This is the better solution if your footer should be at the bottom of the container, rather than at the bottom of the viewport.
See my jsFiddle for more details on this technique.
目前还不清楚您希望潜在的溢出如何在中心内容区域发挥作用，以及您希望适应的浏览器的版本。对于 IE8+，我相信这可以满足您的需求：http://jsfiddle.net/dSkJb/51/。这是一个非常简短的内容示例：http://jsfiddle.net/dSkJb/52/。
也许通过一些认真的有针对性的调整IE7可以适应（我花了太多时间试图让它工作，有几次接近，但无法完全得到它，所以我放弃了）。 IE6 肯定不能用这个。
It is a little unclear how you want potential overflow to work on the center content area, and how old of a browser you want to accommodate. For IE8+ I believe this meets your needs: http://jsfiddle.net/dSkJb/51/. Here's a really short content example: http://jsfiddle.net/dSkJb/52/.
Maybe with some serious targeted tweaking IE7 could be accommodated (I spent too much time trying to make it work, came close a few times, but was not able to quite get it, so I gave up). IE6 will definitely NOT work with this.