相对父DIV继承绝对子DIV的宽度

I am trying to position a child DIV at the bottom of a parent DIV, but I would also like the contents of the child DIV to help dictate the dimensions of the parent DIV. As I have it right now, the child DIV doesn't affect the width/height of the parent DIV.

我试图将一个孩子DIV放在父DIV的底部，但我也想让孩子DIV的内容帮助决定父DIV的尺寸。正如我现在所做的那样，子DIV不会影响父DIV的宽度/高度。

Here is a sample of my HTML/CSS code:

以下是我的HTML / CSS代码示例：

//HTML code:

// HTML代码：

<div id="parent">
    <h3>Top Aligned Title</h3>
    <div id="child"></div>
</div>

//CSS code:

// CSS代码：

#parent {
    background-color:#222;
    position: relative;
    height: 500px;
}
#child {
    background-color:#444;
    position: absolute;
    bottom: 0px;
    width: 100px;
    height: 200px;
}

What do I need to do it achieve what I am trying to do? I could forgo the absolute/relative CSS rules and simply create a table within the parent DIV which would allow me to achieve both bottom alignment and content that dictates the parent's dimensions.

我需要做什么才能实现我想做的事情？我可以放弃绝对/相对CSS规则，只需在父DIV中创建一个表，这将允许我实现底部对齐和指示父级维度的内容。

However, I'd like to know if there a way to do this in CSS and without having to set the width of the parent DIV.

但是，我想知道是否有办法在CSS中执行此操作，而无需设置父DIV的宽度。

thanks in advance!

提前致谢！

3 个解决方案

#1

The short answer is that what you are asking basically can't be done with pure CSS / HTML. (at least without tables) You'd need Javascript that would read #child's width/height and then do the calculation you want to do (I don't know) and set a new height/width to #parent.

简短的回答是，你所要求的基本上不能用纯CSS / HTML来完成。 （至少没有表）你需要Javascript来读取#child的宽度/高度，然后进行你想要做的计算（我不知道）并设置一个新的高度/宽度到#parent。

Otherwise, if you mean that you want #child's height/width to change according to its content, of course this is native CSS, just set it's height/width to auto and then start adding text inside it you'll see it will start growing to fit your content inside.

否则，如果你的意思是你希望#child的高度/宽度根据其内容而改变，当然这是原生CSS，只需将它的高度/宽度设置为auto，然后开始在其中添加文本，你会发现它将开始增长适合你的内容。

As the #child is positioned absolute, then it is taken OUT of the normal flow of the document, therefore it will not affect the #parent.

由于#child位于绝对位置，因此它取自文档的正常流量，因此不会影响#parent。

#2

With modern CSS, this is doable.

使用现代CSS，这是可行的。

HTML:

HTML：

<div id="parent">
    <h3>Top Aligned Title</h3>
    <div id="child">
        <p>CHILD ELEMENT</p>
    </div>
</div>

CSS:

CSS：

#parent {
    background:red;
    height: 500px;
    position:relative;
}
#child {
    background:green;
    position: absolute;
    top:100%;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    width: 100px;
}

http://jsfiddle.net/Bushwazi/bpe5s6x3/

http://jsfiddle.net/Bushwazi/bpe5s6x3/

1. transform:translateY(-100%); is the trick. It's math is based on the element's box-model.
2. 变换：平移Y（〜100％）;是诀窍。它的数学基于元素的盒子模型。
3. You could also combine top:50%; with transform:translateY(-50%); to center it.
4. 你也可以结合最高：50％; with transform：translateY（-50％）;以它为中心。
5. You can swap top for left and translateY for translateX to position the element horizontally.
6. 您可以将top替换为left，将translateY替换为translateX以水平定位元素。

#3

Here you go

干得好

HTML:

HTML：

<main id="parent">
  <div class="popup">Top Aligned Title
    <div class="content">
      Content
    </div>
  </div>
</main>

CSS:

CSS：

#parent {
  width: 120px;
}

.popup {
  position: relative;
  margin-top: 48px;
}

.content {
  left: 0;
  position: absolute;
  background: green;
  width: 100%;
}

http://jsfiddle.net/8L9votay/

http://jsfiddle.net/8L9votay/