absolute positioned element extends past sticky footer - html

Question

I have a dynamic mega menu item when opened the height varies depending on the data, often the height will cause the element to extend past the sticky footer (also position absolute), which is not really what i want at all, is there any solution other than creating unnesesary content to fill the void?
html -
<nav class="menu__base drop-shadow--standard desktop" style="background:#034774;;">
<div class="container">
<ul class="menu__items menu__items--hidden">
<li class="menu__item menu__sub-menu-item">nav item</li>
<li class="menu__item menu__sub-menu-item">nav item</li>
<li class="menu__item menu__sub-menu-item open">
<span class="menu__sub-menu-item__title">Open nav item</span>
<span class="menu__item__hover-underline"></span>
<div class="menu__sub-menu-wrapper drop-shadow--standard" style="height: 732px; left: -2px; background-color: #034774;">
<div class="menu__sub-menu" style="margin-top: 0px;">
<div class="menu__mega-menu">
<div class="mega-menu-multi-race ">
<table class="mega-menu-multi-race__table">
content, lots and lots of content inside the open nav item
</table>
</div>
</div>
</div>
</div>
</li>
<li class="menu__item menu__sub-menu-item">nav item</li>
</ul>
</div>
</nav>
<div class="container">
<p>
content inbetween
</p>
</div>
<div class="container">
<p>
more content
</p>
</div>
<div class="container">
<p>
more content.............
</p>
</div>
<footer class="container-fluid footer">
<section class="row">
<div class="container padding-all-10">
<div class="footer__info">
<div class="col-lg-6 col-md-6 col-xs-12 padding-lf-0">
<p class="margin-all-0">Sticky footer</p>
</div>
</div>
</div>
</section>
</footer>
css -
.menu__sub-menu-wrapper {
position: absolute;
top: 100%;
left: 0;
overflow: hidden;
margin-top: 2px;
left: -2px;
}
.menu__sub-menu {
left: 0;
top: 0;
}
.menu__item {
float: left;
position: relative;
border-right: solid 2px #053b5e;
font-weight: bold;
font-size: 17px;
list-style-type: none;
min-width: 100px;
text-align: center;
padding:5px;
}
.menu__items {
list-style-type: none;
margin: 0;
padding: 0;
float: left;
}
.footer {
width: 100%;
background:red;
font-size: 17px;
position: absolute;
bottom: 0;
}
link to fiddle - https://jsfiddle.net/2648daniel/wo3jxjb8/

Answer 1

Dan,
I have modified your fiddle a fair bit and have achieved what you are after. The menu no longer overlaps the footer and scales as required, based on a fixed height or whatever content within that block.
https://jsfiddle.net/2gLLkoks/7/
In summary I have used a combination of floating elements left/clearing the floats as appropriate. eg
.menu__sub-menu-wrapper {
float:left;
...
.menu__sub-menu {
float:left;
...
....
<div class="clear"></div>
</nav>
etc
I have also removed the absolute positioning from the elements and added a content wrapper which is absolutely positioned with a negative z-index so it appears under the sub menu.
.containerWrapper {position:absolute;top:50px;float:left;z-index:-1}
<div class="containerWrapper">
<div class="container">
<p>
more content...........
Hope this helps ;)