html - 当屏幕尺寸改变时，用内部的 slider 调整 DIV 的大小

Question

我正试图在该网站上获得“面板”效果。除了中间的内容之外，一切都保持静态。随着网站的进展，只有中心内容区域会向下滚动。导航菜单和页眉以及(尚未编码的)页脚将保持不变。到目前为止，我已经完成了这个。但我希望中心的图像/ slider 是面板的大小。目前，当您更改屏幕大小时， slider 会调整大小，这很好，也是我想要的，但是，我只需要 slider 以具有正确的高度开始。

在我的 13 英寸屏幕上，正确的高度约为 620px。但是，如果我转移到更大的屏幕上，显然 620px 是不正确的，我不知道该怎么做。

我试过引入 height:80%;进入 slider 的代码，但这不起作用。

可以在此处找到该站点:

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>

因此，#content 实际上将包含所有需要滚动的产品。 flexslider 目前太长了，我需要它是屏幕的全尺寸，这样就没有滚动，如果这有意义的话。

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;
}

澄清一下，当屏幕尺寸改变时图像会调整大小，这正是我想要的。但是，我想根据屏幕的大小设置 div 的最大高度，以便 slider /图像填充面板。

最后一件事，这段代码:

.flexslider .slides img {
max-width: 100%;
display: block;
margin: 0 auto;
width: 100%;
}

适用于宽度，所以如果我改变最大宽度/宽度，它都会改变并且工作完美。我只是想对高度做同样的事情，但是，这是行不通的。

Answer 1

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

我不明白 .slider 的作用，也没有看到它的作用...但是这个 css 将使您的 div 可以滚动，并且将位置更改为固定将使用底部将其固定到位: 0 定位将使其具有所需的高度。