CSS浮动的并排div高度100%

Question

CSS浮动的并排div高度100%

3

我不知道如何没有图片来描述这个问题。我有两个并排的 div，它们在另一个带有 padding 和 margin 的 div 中。这是我想要实现的效果：

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

但这是我得到的结果。我能够浮动div并补偿边距等，但我无法使div C扩展到整个A的高度。A和B都没有固定的高度，那么我该如何使C扩展到A的完整高度？

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

A的高度由B的高度拉伸。这是完全流体布局，因此宽度也不是固定的。基本上，我需要C扩展整个A的高度。

我尝试过调整所有高度，但是我无法使其工作，因为高度不是固定的:(

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

编辑：我需要支持IE，而不使用CSS hack。

- sethvargo

是的，问题在于div C被浮动了，所以它实际上不是A的子元素（B也是一样）。高度应用于父元素，而C实际上没有父元素可以调整大小。 - sethvargo

6个回答

1

我知道的最好、最简单的方法是在 #A 中添加 overflow:hidden，并给 #C 一个值 padding-bottom:999em; margin-bottom:-999em;

它甚至可以在 IE5 中使用！

- cyreb7

1

这是一个疯狂的想法，我需要解决CSS的问题，但如果...

B和C被包含在A中 C绝对定位于A的右侧、顶部和底部 A具有与C一样宽的右填充或边距

- n8wrl

这个方法是可行的，我经常在我的Web应用程序中使用它。然而，它也有缺点，特别是如果你不想溢出。 - Sandwich

这在IE6中不起作用。它会将C附加到页面的右侧，而不是A。 - sethvargo

1

#A 需要有 position:relative 或 position:absolute，否则它将相对于 <body> 元素绝对定位。这种方法兼容 IE5 以来的所有版本。但是，根据情况，它也有其自身的缺点。 - Sandwich

它没有按照预期的方式运行。无论如何，它都会进入body。我有其他的div，包括两个包装div，它们都是position:relative，但它仍然移动到body外面。除非我将其设置为position:absolute，否则它不起作用，而这是我不能做的。 - sethvargo

1

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

每当我遇到浮动和高度的问题时，我会在父元素上添加overflow:auto。我在quirksmode上发现了这个技巧。

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

- pd1138

0

这里是我个人库中的一段代码，可能会对你有所帮助，另外，请查看这个问题和这个更具体的javascript解决方案。

一些注意事项：

默认情况下，这些值是相对于<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;
}

- Sandwich

0

网上有很多关于CSS等高列的文章。我通常使用jQuery来计算所有列的最大高度，然后使用jQuery将所有列的高度设置为相同的值。我通常手动完成此操作，但也有一些插件可以完成此任务。

如果仅出于视觉原因需要列具有相同的高度，则可以在列上使用背景图像进行创意设计，以产生相同高度的幻觉。这并不总是有效，取决于您的设计，但我过去曾经使用过它。

- mpdonadio

我最终不得不使用jQuery。我决定在IE6中如果不使用JS是不可能的，而且我可以要求浏览器支持JS。 - sethvargo

在过去的两年中，我选择使用jQuery来解决IE6问题，而不是苦苦思索CSS hack/解决方案（即使使用条件样式表）。话虽如此，我不知道你的布局需求是什么，但是在父容器上使用背景图像来伪造高度可能非常方便，并且通常是一个非常简单的解决方案（当它可以工作时）。 - mpdonadio

我做不到那个，因为宽度也是流动的。 - sethvargo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JakeParis · Accepted Answer

如何将 C 的浮动改为使用 CSS 绝对定位实现右侧对齐？示例代码： 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;
}