css 并排浮动 div 高度 100%答案

【问题标题】：css floating side-by-side divs height 100%css 并排浮动 div 高度 100%
【发布时间】：2011-06-04 06:19:50
【问题描述】：

没有图片我不知道怎么问。我有两个并排的 div，在另一个具有填充和边距的 div 中。这就是我想要实现的目标：

+-------------------------------------------------------------------+--------+
|                                       A                           |   C    |
|   +-----------------------------------------------------------+   |        |
|   |                               B                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   +-----------------------------------------------------------+   |        |
|                                                                   |        |
+-------------------------------------------------------------------+--------+

但这就是我得到的。我能够浮动 div 并补偿边距等，但我不能让 div C 延伸到 A 的整个高度。A 和 B 都没有固定高度，所以我如何让 C 延伸到A的全高？

+-------------------------------------------------------------------+--------+
|                                       A                           |   C    |
|   +-----------------------------------------------------------+   |        |
|   |                               B                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   |        |
|   |                                                           |   +--------+
|   |                                                           |            |
|   |                                                           |            |
|   |                                                           |            |
|   +-----------------------------------------------------------+            |
|                                                                            |
+----------------------------------------------------------------------------+

A 的高度被 B 的高度拉伸。这也是一个完全流畅的布局，所以宽度也不是固定的。基本上，我需要 C 来扩展 A 的整个高度。

我试着玩弄所有的高度，但我无法让它工作，因为高度不固定:(

A 基本上只是一个 div 包装器，没有填充，没有边距。 B实际上是由两个带有margin和padding的div组成，float:left; C只是一个div，float:right;

编辑： 我也需要支持 IE，没有 CSS hacks

【问题讨论】：

是的。问题是 div C 是浮动的，所以它实际上不是 A 的孩子（与 B 相同）。 height 适用于父级，而 C 实际上没有父级来调整大小

标签： css layout internet-explorer-6 html

【解决方案1】：

如何让 C position: absolute; right: 0; 而不是浮动？像这样：http://jsfiddle.net/JMC_Creative/2gr3T/1/

#a { overflow:auto;
position: relative;
}

#b {height: 200px;
    width: 200px;
    margin: 50px;
    float: left;
}

#c { height: 100%;
    position: absolute;
    right: 0;
    width: 40px;
}

【讨论】：

效果很好！除非我试图支持 Internet Explorer，我就是这样。在 IE6 中，C 附加在 PAGE 的右侧，而不是 A。是的，我知道 IE 很烂，我鄙视必须支持它，但我必须为这个项目。
如果 C 必须在 A 之外，我建议转移到 javasript 来寻求解决方案。
IE6 应该在 parent 是 position: relative 时正确处理...否则我喝得太醉了。
不。 IE6，如果父级是位置：绝对，但不是相对。这是一个已知的错误

【解决方案2】：

这是一个疯狂的想法，我必须解决 CSS，但如果...

A 包含 B 和 C C 绝对位于 A 的右、上和下 A 的右边距或边距与 C 一样宽

【讨论】：

这确实有效，我经常在我的 Web 应用程序中使用这种方法。但是它也有缺点，特别是如果你不想溢出。
这在 IE6 中不起作用。它将 C 附加到页面的右侧，而不是 A
#A 需要有position:relative 或position:absolute，否则对<body> 元素是绝对的。这种方法一直兼容到 IE5。但同样，它也有相当多的缺点，具体取决于具体情况。
它的行为不是这样。无论如何，它都会变成身体。我还有其他 div，包括两个包装 div，它们都是 position:relative 并且它仍然移动到身体之外。除非我将其设置为位置：绝对，否则它不起作用

【解决方案3】：

这是我个人图书馆中的一个 sn-p，可以帮助您，另外，请查看这个 question 和这个更具体的 javascript solution。

一些注意事项：

默认情况下，这些值对于<body> 元素是绝对的，除非
您将父级的position 属性设置为relative 或absolute，否则该元素将绝对是<body>，或具有position 注册的最接近 元素。

/* 
Name: Absolute 100% Height
Author: DSKVR 2010 
Website: http://dskvry.com
*/

body *.full-height, 
body *.full-height-left, 
body *.full-height-left, 
body *.full-height-width {
    position:absolute;
    height:auto;
    margin:0;
}

body *.full-height {
 top:0;
 bottom:0;
}

body *.full-height-left {
    top:0;
    bottom:0;
    left:0;
}

body *.full-height-right {
    top:0;
    right:0;
    bottom:0;
}

body *.full-area {
    top:0;
    left:0;
    right:0;
    bottom:0;
}

【讨论】：

【解决方案4】：

网上有很多关于 CSS 等列高度的文章。我一般使用的解决方案是使用 jQuery 计算所有列的最大高度，然后使用 jQuery 将所有列的高度设置为相同的值。我通常是手动完成的，但是有一些插件可以完成这项任务。

如果出于纯粹的视觉原因需要使列具有相同的高度，您可以创造性地在列上添加背景图像，以产生高度相同的错觉。这并不总是有效，具体取决于您的设计，但我过去曾使用过它。

【讨论】：

我最终不得不使用 jQuery。我已经决定在 IE6 中不使用 JS 是不可能的，我可以要求浏览器支持 JS。
在过去两年左右的时间里，使用 jQuery 解决 IE6 问题一直是我的工具选择，而不是在 CSS hacks/workarounds（即使使用条件样式表）上猛烈抨击。也就是说，我不知道你的布局需要是什么样的，但是用父容器上的背景图像伪造高度真的很方便，而且通常是一个非常简单的解决方案（什么时候可以工作）。
我不能这样做，因为宽度也是流动的

【解决方案5】：

我认为这不会解决问题，但它可能会有所帮助。

每当我遇到浮动和高度问题时，我都会在父元素上放置溢出：自动。我在 quirksmode 上发现了这种技术。

http://www.quirksmode.org/css/clearing.html

【讨论】：

【解决方案6】：

我所知道的最好和最简单的方法是将overflow:hidden 添加到#A 并给#C 一个值 padding-bottom:999em; margin-bottom:-999em;

它甚至可以在 IE5 中运行！

【讨论】：