绝对位置元素上的高度100％

debugcn 发表于 Dev

杰伊

我试图在此处http://www.templatemonster.com/demo/51129.html
HTML上制作演示的导航栏：

  <div class="main-container">
      <div class="top-nav-wrap">
        <div class="top-nav">
          <ul>
          <li class="border"><a href="#" >HOME</a></li>
          <li class="border submenu"><a href="#" >BLOG</a>
            <div class="submenu-wrap">
              <ul class="submenu-1">
              <li><a href="#">TESTIMONIALS</a></li>
              <li><a href="#">ARCHIVES</a></li>
              <li><a href="#">FAQS</a></li>

            </ul>
          </div>
          </li>
          <li class="border"><a href="#" >SERVICES</a></li>
          <li class="border"><a href="#" >OUR GALLERY</a></li>
          <li class="border"><a href="#" >CONTACTS</a></li>
        </ul>
      </div>
      </div>
      <div class="top-container">

      </div>
    </div>

CSS：

* {
  margin: 0;
  padding: 0;
}
body {
  background-image: url(../images/header-img.jpg);
  font-family: 'Roboto Condensed', sans-serif;
  height: 1900px;
}
.top-container {

  overflow: hidden;
}
.top-nav-wrap {
  width: 100%;

}
div.top-nav-scrolled.top-nav-wrap {
  position: fixed;
  top: 0;
  left: 0;
  background: white;
}
.top-nav {

  width: 1200px;
  margin: auto;
  /*overflow: hidden;*/
}

.top-nav ul {
  /*overflow: hidden;*/
  list-style: none;

}
.top-nav ul li {
  position: relative;
  float: left;
  padding-top: 30px;
  margin-left: 50px;
  padding-bottom: 10px;

}
.top-nav ul li:first-child {
  margin-left: 0;
}

.top-nav li a {

  text-decoration: none;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 1px;
  color: #ba4b07;
}
.top-nav li.border::before {
  position: absolute;
  left: -25px;
  content: '\\';
  font-size: 20px;
  color: #ba4b07;
}

.top-nav li.border:first-child::before {
  content: '';
}
.top-nav li.border> a::after {
  position: absolute;
  top: -30px;
  left: 0;
  content: '';
  display: block;
  width: 100%;
  height: 20px;
  background:  #ba4b07;
  transition: all 0.3s ease;
}
.top-nav li.border a.hoverNav::after {
  top:0px;
}


.submenu-wrap {
  height: 0px;
  position: absolute;
  top: 100%;
  overflow: hidden;
  transition: all 0.3s ease;

}
.submenu:hover > div {
  height: 100%;
}
ul.submenu-1 {
  width: 300px;
  padding-top: 15px;
  padding-bottom: 30px;

  background:#ba4b07;
}
ul.submenu-1 li{
  padding: 0px;
  float: none;
  margin: 0;
}
ul.submenu-1 li a {
  display: block;
  padding: 20px;
  color: white;
  font-size: 1em;
}

ul.submenu-1 li:hover {
  background: white;
}
ul.submenu-1 li:hover a {
  color: #ba4b07;
}

Js：

$(function(){

  $('.top-nav ul li a').on('mouseover',function(){
    $(this).addClass('hoverNav');
  }).on('mouseout',function(){
    $(this).removeClass('hoverNav');
  });

  $(window).on('scroll',function(){
    $('.top-nav-wrap').addClass('top-nav-scrolled');
    if($(window).scrollTop()==0){
      $('.top-nav-wrap').removeClass('top-nav-scrolled');
    }

  });



});

在这里的问题是.submenu:hover > div有height:100%;。我在这里看到了很多有关身高100％的答案，但无法理解。
height:100%在这里只占整体的一部分div而不是全部。
我本可以使用硬编码的像素，但所有子菜单的大小都不同，并且使用相同的类。编辑：而且使用height：auto不会让我的CSS过渡到工作。和使用max-height相同。
我希望我的CSS过渡保留下来。

弗朗特

将子菜单更改为height:auto，这样它将根据内部的子元素计算高度，如下所示。

更新以实现height transition，您可以尝试以下操作，仍然height可以auto，但是可以transit使用inner elements。

 .submenu:hover >.submenu-wrap {
   height:auto;
 }
.submenu:hover >.submenu-wrap> ul.submenu-1 {
  padding-top: 15px;
  padding-bottom: 30px;
 }
.submenu:hover >.submenu-wrap> ul.submenu-1 li a {
    padding-top: 20px;
    padding-bottom: 20px;
 }

检查更新的jsFiddle

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。