Question

我不知道如何在没有照片的情况下问这个问题。我有两个div，并排，在另一个带有填充和边距的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黑客

Answer 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;
}

Answer 2

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

A含有B和C. C绝对位于A的右侧，顶部和底部 A具有与C

一样宽的右边距或边距

Answer 3

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

每当我遇到浮点数和高度问题时，我会在父元素上放置overflow：auto。我在quirksmode上发现了这种技术。

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

Answer 4

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

它甚至适用于IE5！

Answer 5

以下是我个人图书馆的一个片段，可以帮助您，也可以查看此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;
}

Answer 6

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

如果由于纯粹的视觉原因，列需要具有相同的高度，您可以在列上创建背景图像，以获得相同高度的错觉。这并不总是有效，取决于您的设计，但我过去曾使用它。

css浮动并排div高度100％

6 个答案: