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也应该放在一个应该有一个固定高度的容器中（例如＆＃39; height：integer px ＆＃39;或者＆＃39; height：integer ％＆＃39）

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

以div的百分比设置高度

1 个答案: