在一個div

Question

我有一個網站，我需要設置一個div的尺寸以下方式的比例設置height：

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

簡答題;格也應該是在容器中，其應當具有固定高度（如「高度：整數PX」或「高度：整數％」）

由於寬度已經具有固定寬度的容器，其是瀏覽器的寬度，但高度不。