绝对定位的孩子的顶部边缘固定在其父母的底部边缘，其高度未知？ [英] Absolutely positioned child's top edge pinned to the bottom edge of its parent that has unknown height?

问题描述

根据标题，尽管有点满口，希望这些标题可以理解。只是为了更清楚地说明一下：

这是下拉菜单系统的一部分。我想要一个子菜单直接出现在父列表项下。这是我的HTML：

 < ul> 
< li> 
< a href =＃>商品1 
< ul> 
< li>< a href =＃>子菜单1< / a>< / li> 
< li>< a href =＃>子菜单2< / a>< / li> 
< li>< a href =＃>子菜单3< / a>< / li> 
< / ul> 
< / a> 
< / li> 
< li> 
< a href =＃>第2项< / a> 
< / li> 
< / ul> 
  

顶级 li 元素是未知的（动态）高度。我希望孩子 ul 直接出现在父母的下方，左边缘对齐，孩子的顶边固定在父母的底边。

现在我已经写了几年CSS，但意识到我不知道该怎么做，或者如果有可能......有什么想法？感谢。

编辑

我要求的是--logically简单。问题在于标题，也许我通过谈论我遇到过的具体情况来淹没水域。这是一个很简单的例子：

 < div class =parent> ; 
< div class =child>< / div> 
< / div> 
  

---

 。父母{
位置：绝对; 
 top：200px; 
 left：50px; 
 width：500px; 
 height：200px; / *这需要动态* / 
 background-color：green; 
} 
 
 .child {
 position：absolute; 
 bottom：0; 
 left：0px; 
 width：100px; 
 height：100px; 
背景色：紫色; 
} 
  

https://jsfiddle.net/4ww9h3wu/

我想让紫色盒子的顶边贴在绿框，而绿框的高度是动态的。这个通常对我来说是这样的......但是没有你的 CSS这很难以确保它会在你的实例中工作。

  li {
 position：relative; 
} 
 
 li> ul {
 position：absolute; 
剩下：0; 
 top：100％; 
} 
  

As per the title, which hopefully is intelligible despite being a bit of a mouthful. Just to spell it out a bit more clearly:

This is part of a drop-down menu system. I want a submenu to appear directly below the parent list item. Here is my HTML:

<ul>
    <li>
        <a href="#">Item 1
            <ul>
                <li><a href="#">Sub menu 1</a></li>
                <li><a href="#">Sub menu 2</a></li>
                <li><a href="#">Sub menu 3</a></li>
            </ul>
        </a>
    </li>
    <li>
        <a href="#">Item 2</a>
    </li>
</ul>

The top level li elements are of unknown (dynamic) height. I want the child ul to appear directly under its parent, with left edges aligned, and the child's top edge pinned to the bottom edge of the parent.

I've been writing CSS for a few years now but realised I have no idea how to do this, or if it is possible... any ideas? Thanks.

EDIT

What I am asking for -logically- is very simple. The question is the title, and perhaps I muddied the waters by talking about the specific scenario where I've encountered this. Here is a much simpler example of the problem:

<div class="parent">
    <div class="child"></div>
</div>

---

.parent {
    position: absolute;
    top:200px;
    left:50px;
    width: 500px;
    height: 200px; /* this needs to be dynamic */
    background-color: green;
}

.child {
    position: absolute;
    bottom:0;
    left:0px;
    width: 100px;
    height: 100px;
    background-color: purple;
}

https://jsfiddle.net/4ww9h3wu/

I want the top edge of the purple box stuck to the bottom of the green box, while the height of the green box is dynamic. Ya dig?

解决方案

This usually does it for me...but without your CSS it's hard to be sure it will work in your instance.

li {
position:relative;
}

li > ul {
position:absolute;
left:0;
top:100%;
}

这篇关于绝对定位的孩子的顶部边缘固定在其父母的底部边缘，其高度未知？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！