以 div 的百分比设置高度

Question

我有一个网站，我需要通过以下方式设置 div 的尺寸：

width:86%;
height: 80%; 

这样当屏幕尺寸增加/减少时，div 就会显示正确的尺寸。

目前，宽度工作正常，我可以设置宽度的百分比和 div 调整大小。但是，除非我指定像素数量，否则高度不会，但显然，当屏幕尺寸发生变化时，这不起作用。 （除非有办法解决这个问题）。

我的问题是，为什么高度百分比在这个 div 中不起作用？

我在下面包含了一些代码，我希望它足以得到一个好主意。否则，该网站位于此处：

https://mimi-fasi.myshopify.com/（这个想法是让中间的滑块图像适合那个面板和屏幕，这样就不需要滚动了）

<div id="content">
 <div class="flexslider type-header scaled-text-base">
  <ul class="slides">
   <li class="slide slide-1 flex-active-slide" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;">
  <a href="/collections/all">
  <img src="//cdn.shopify.com/s/files/1/0727/2709/t/2/assets/slide_1.jpg?155" alt="Slide 1" draggable="false">

  <div class="overlay-text posx-left posy-bottom"> 
    <div class="inner">

      <h1 class="text-1"><span class="scaled-text" style="font-size: 5.83333333333333%;">Welcome to</span></h1>
      <h2 class="text-2"><span class="scaled-text" style="font-size: 5.83333333333333%;">Masonry for Shopify</span></h2>

    </div>
  </div>

  </a>
    </li>
  </ul>
</div>

CSS：

#content {
max-width: 940px;
transition: padding 250ms;
overflow: hidden;
position: absolute;
left: 260px;
top: 100px;
}

.flexslider {
position: relative;
zoom: 1;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}

.flexslider .slides {
overflow: hidden;
zoom: 1;
margin: 0;
}
.slides, .flex-control-nav, .flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}

如果我设置高度：100%；在 HTML 开始标签中，它似乎可以工作，除了我的导航栏消失了，我不知道如何取回它。

Answer 1

简答； div 也应该在一个具有固定高度的容器中（例如 'height:integerpx' 或 'height:integer%'）

因为width已经有一个固定宽度的容器，它是浏览器的宽度，但高度没有。