Question

我试图将div元素的宽度设置为它的最长子元素的宽度，在这种情况下恰好是我想要锁定到父div底部的div。我也没有为父母使用固定的高度，因为我不知道孩子需要多大的

这是我的html / css：

HTML：

<div id ="header-right">
   <div id="content1"></div>
   <div id="footer"></div>
</div>

CSS：

#header-right{
    background-color: red;
    position: relative;
    display: inline-block;
    height: 300px; /*The actual width is unknown, this is just for example*/
}
#content1{
    background-color: blue;
    width: 200px;
    height: 100px;
}
#footer{
    background-color: cyan;
    position: absolute;
    bottom: 0;
    width: 300px; /*Also an unknown value*/
    height: 25px;
}

你可以看看这个jfiddle，看看会发生什么： https://jsfiddle.net/rkdqp9m5/2/

您可以看到容器div忽略了页脚，因为它是绝对定位的。

但是，如果我没有对页脚使用绝对定位，那么我就无法将页脚锁定到div的底部，正如你在这个jfiddle中看到的那样 https://jsfiddle.net/rkdqp9m5/3/

我想将页脚锁定到容器的底部，但我也希望父页的宽度基于页脚。我不想为此使用表格，我也不想使用固定的宽度或高度，因为容器和页脚的尺寸将基于宽度我不知道的图像。

编辑：如果可能的话，我还想严格遵守HTML / CSS

Answer 1

如果您对浏览器要求flexbox没问题，可以这样做：

#header-right {
    background-color: red;
    padding: 20px 0px 0px 0px;
    height: 300px;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
}
#content1 {
    background-color: blue;
    width: 200px;
    height: 100px;
    align-self: flex-start;
}
#footer {
    background-color: cyan;
    width: 300px;
    height: 25px;
    align-self: flex-end;
}

<div id="header-right">
    <div id="content1"></div>
    <div id="footer"></div>
</div>

JSFIDDLE DEMO ，包含所有必需的供应商前缀。

Answer 2

这有用吗：Relative parent DIV to inherit the width of absolute child DIV

它表明你不能使用纯CSS，但你可以使用Javascript来实现你想要做的事情。

将父级宽度设置为与子级

2 个答案: