CSS: Lassen ein untergeordnetes Element mit variabler Höhe und absoluter Position an der Spitze des übergeordneten Elements enden?

Question

In einer Website habe ich ein "Drop-up" -Menü am Ende einer Website.

Werfen Sie einen Blick auf die folgende Geige:

body { 
 
    background-color: #ccc; 
 
} 
 
ul { 
 
    list-style-type:none; 
 
    width:200px; 
 
} 
 
.spacer { 
 
    height:150px; 
 
    width:auto; 
 
} 
 
ul,li { 
 
    margin:0; 
 
    padding:0; 
 
} 
 
a { 
 
    color:#fff; 
 
    width:200px; 
 
    background-color:#e4003d; 
 
} 
 
ul li a { 
 
    text-decoration: none; 
 
    display: block; 
 
    padding: 10px; 
 
} 
 

 
ul li ul { 
 
    z-index: 8888; 
 
    position: absolute; 
 
    background-color: #fff; 
 
    display: none; 
 
} 
 

 
ul:hover li ul, ul:focus li ul { 
 
    display:block; 
 
} 
 

 
ul li ul li { 
 
    background-color: #fff; 
 
    color: #e4003d; 
 
    background-image: none; 
 
} 
 
ul li ul li a { 
 
    background-color: #fff; 
 
    color: #e4003d; 
 
    background-image: none; 
 
} 
 

 
ul li ul li a:hover, ul li ul li a:focus { 
 
    background-color: #e4003d; 
 
    color: #fff !important; 
 
} 
 

 
ul li ul { 
 
    margin-top: -100px; 
 
}

<div class="spacer"></div> 
 
<ul class="page-switcher"> 
 
    <li> 
 
    <a href="#">Sitamet</a> 
 
    <ul> 
 
     <li><a href="http://#">Lorem</a></li> 
 
     <li><a href="http://#">Ipsum</a></li> 
 
     <li><a href="http://#">Dolor</a></li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
<div class="spacer"></div>

Wenn das Menü ich das Untermenü genau bis zum Ende an der Spitze des ul.page-switcher wollen schwebte wird. Es gibt keine Informationen über die Anzahl der Elemente im Menü oder deren Höhe.

In dem Beispiel habe ich margin-top:-100px; verwendet, aber dies ist nur zur Demonstration, da die Anzahl der Pixel nicht festgelegt ist.

Brauchen Sie eine CSS-Lösung und sollte die Position absolut halten. Wie würdest du das lösen?

Answer 1

Machen Sie die ul.page-switcherposition: relative und geben Sie die versteckte ul Position zu setzen haben bottom: 100%

Damit wird die Höhe des Seite-Switcher oder Höhe/Höhe der Popup Elemente keine Rolle.

Warum dies funktioniert, ist auf der Tatsache basiert, daß die absolute positionierte ul ‚s bottom: 100% relativ wird in seinem ersten Vorfahren eine andere Position als static aufweist, die in diesem Fall die page-switcher ist.

Aktualisiert/Added CSS-Regeln

ul.page-switcher { 
    position: relative; 
} 

ul li ul { 
    bottom: 100%; 
} 

Stapel Snippet

body { 
 
    background-color: #ccc; 
 
} 
 
ul { 
 
    list-style-type:none; 
 
    width:200px; 
 
} 
 
.spacer { 
 
    height:150px; 
 
    width:auto; 
 
} 
 
ul,li { 
 
    margin:0; 
 
    padding:0; 
 
} 
 
a { 
 
    color:#fff; 
 
    width:200px; 
 
    background-color:#e4003d; 
 
} 
 
ul li a { 
 
    text-decoration: none; 
 
    display: block; 
 
    padding: 10px; 
 
} 
 

 
ul li ul { 
 
    z-index: 8888; 
 
    position: absolute; 
 
    background-color: #fff; 
 
    display: none; 
 
} 
 

 
ul:hover li ul, ul:focus li ul { 
 
    display:block; 
 
} 
 

 
ul li ul li { 
 
    background-color: #fff; 
 
    color: #e4003d; 
 
    background-image: none; 
 
} 
 
ul li ul li a { 
 
    background-color: #fff; 
 
    color: #e4003d; 
 
    background-image: none; 
 
} 
 

 
ul li ul li a:hover, ul li ul li a:focus { 
 
    background-color: #e4003d; 
 
    color: #fff !important; 
 
} 
 

 
ul.page-switcher { 
 
    position: relative; 
 
} 
 

 
ul li ul { 
 
    bottom: 100%; 
 
}

<div class="spacer"></div> 
 
<ul class="page-switcher"> 
 
    <li> 
 
    <a href="#">Sitamet</a> 
 
    <ul> 
 
     <li><a href="http://#">Lorem</a></li> 
 
     <li><a href="http://#">Ipsum</a></li> 
 
     <li><a href="http://#">Dolor</a></li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
<div class="spacer"></div>

Answer 2

Sie müssen ein min-height und position relative auf das erste li Element setzen.

Die Submenü Sie position absolute und bottom 0

Answer 3

Verwenden position: relative;bottom: 56px;56px ist die Höhe der Mutter ul

body { 
 
    background-color: #ccc; 
 
} 
 
ul { 
 
    list-style-type:none; 
 
    width:200px; 
 
} 
 
.spacer { 
 
    height:100px; 
 
    width:auto; 
 
} 
 
ul,li { 
 
    margin:0; 
 
    padding:0; 
 
} 
 
a { 
 
    color:#fff; 
 
    width:200px; 
 
    background-color:#e4003d; 
 
} 
 
ul li a { 
 
    text-decoration: none; 
 
    display: block; 
 
    padding: 10px; 
 
} 
 

 
ul li ul { 
 
    z-index: 8888; 
 
    background-color: #fff; 
 
    display: none; 
 
    position: relative; 
 
    bottom: 56px; 
 
} 
 

 
ul:hover li ul, ul:focus li ul { 
 
    display:block; 
 
} 
 

 
ul li ul li { 
 
    background-color: #fff; 
 
    color: #e4003d; 
 
    background-image: none; 
 
} 
 
ul li ul li a { 
 
    background-color: #fff; 
 
    color: #e4003d; 
 
    background-image: none; 
 
} 
 

 
ul li ul li a:hover, ul li ul li a:focus { 
 
    background-color: #e4003d; 
 
    color: #fff !important; 
 
} 
 

 
ul li ul { 
 
    margin-top: -100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="spacer"></div> 
 
<ul class="page-switcher"> 
 
    <li> 
 
    <a href="#">Sitamet</a> 
 
    <ul> 
 
     <li><a href="http://#">Lorem</a></li> 
 
     <li><a href="http://#">Ipsum</a></li> 
 
     <li><a href="http://#">Dolor</a></li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
<div class="spacer"></div>