Resize DIV with a slider inside when screen size changes - html

Question

I am trying to get a 'panel' effect going on this website. Everything remains static apart from the content in the middle. As the site progresses, only the centre content area will scroll down. The navigation menu and the header and (yet to be coded) footer will remain fixed. So far, i have accomplished this. But i want the image/slider in the centre to be the size of the panel. Currently, the slider resizes when you change screen size, which is great and what i want, however, i just need to slider to have the correct height to start with.
On my 13inch screen, the correct height is around 620px for the height. However, if i transfer onto a larger screen, obviously, the 620px is not correct and i cannot work out how to do this.
I have tried introducing height:80%; into the code for the slider, but this does not work.
The site can be found here:
https://mimi-fasi.myshopify.com/
I'm sure this is fairly basic stuff, but i cannot get it to work.
<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>
So, #content is effectively going to contain all of the products, which needs to be scrollable. The flexslider is what is too long at the moment, and i need it to be the full size of the screen, so that there is no scroll, if that makes sense.
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;
}
Just to clarify, the image resizes when the screen size changes, which is exactly what i want. However, i want to set a max height for the div depending on the size of the screen, so that the slider/image fills the panel.
One last thing, this code:
.flexslider .slides img {
max-width: 100%;
display: block;
margin: 0 auto;
width: 100%;
}
Works fine for width, so if i change the max width/the width down, it all changes and work perfect. I am only attempting to do the same thing with the height, however, this does not work.

Answer 1

#content {
max-width: 940px;
transition: padding 250ms;
overflow: hidden;
position: fixed;
left: 260px;
top: 100px;
overflow-y:scroll;
}
I didn't get what the .slider does nor did I see it in action... But this css will make your div scroll-able, and changing the position to fixed will clip it in place, using the bottom:0 positioning will make it have the height desired.