以div的百分比设置高度

Question

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

width:86%;
height: 80%; 

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

目前，width工作正常，我可以设置宽度的百分比，并且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：integer px '或'height：integer ％ '）

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