Изменение размера DIV с помощью ползунка внутри при изменении размера экрана

Question

Я пытаюсь получить эффект «панели», который происходит на этом веб-сайте. Все остается статическим, кроме содержания в середине. По мере продвижения сайта только область содержимого центра будет прокручиваться вниз. Меню навигации и заголовок и (еще не закодированный) нижний колонтитул останутся фиксированными. До сих пор я это сделал. Но я хочу, чтобы изображение/слайдер в центре было размером панели. В настоящее время слайдер изменяет размер, когда вы меняете размер экрана, и это здорово, и что я хочу, однако мне просто нужно, чтобы слайдер имел правильную высоту для начала.

На моем 13-дюймовом экране правильная высота составляет около 620 пикселей для высоты. Однако, если я перехожу на более крупный экран, очевидно, что 620px неверен, и я не могу понять, как это сделать.

Я пробовал ввести высоту: 80%; в код для слайдера, но это не работает.

На сайте можно найти здесь:

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 в зависимости от размера экрана, так что ползунок/изображение заполняет панель.

Одна последняя вещь, этот код:

.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 позиционирование сделает его желаемой высотой.