I have a particular requirement of implementing a child div with scrollbars while keeping parent and other sibling elements fixed at their position with no other scrollbars. It might sound confusing, let me explain it with example:

Html page - Order of below elements are fixed:

1. Navigation bar with some fixed size lets say 50px.
2. Main content with dynamic size base don customer input. It can have scrollbars.
3. Picture gallery with some fixed size lets say 100px.
4. Navigation bar with some fixed size lets say 50px.

The above statements are nothing but html elements. First we'll have navigation bar with fixed size, lets say height is 50px.

Then we'll be having our main content element and its width will be full page and height will be set by customer and it can have scrollbars in case content size is more. Suppose customer set 950px as height of this element and we are loading an image that is 3600x4000. In this case this element should have scrollbars.

Then we'll be having a gallery of fixed height 100px.

Then our last element again is navigation bar with again fixed height that is 50px.

You can image this will the only thing that I want to show on page and for all of the above width will be full page.

This is the structure that I want but there are scenarios that we may need to consider while designing this.

1. Based on the configuration some time we show top navigation bar and some time bottom navigation bar and some time both.
2. No matter how big the content is the content element should be able to show entire content, can have scrollbars.
3. Based on configuration we may hide gallery element. So, we may or may not have gallery.
4. No matter what device we are using this should fit. And there should be only single scrollbar and that should be in content area not anywhere else.
5. Whenever we hide or show any element as content element has fixed height so it can't change but parent element and other siblings should adjust to fit in the screen.
6. if content element's size is really small then we can use some default value to fit in the screen.

I also tried something but to avoid having multiple scrollbars we had to fix(in my screen 780px is right value) the height. Also same is not working in different screen sizes (devices).

    <div id="parent" style="height:780px;width:100%;border:blue 2px solid;">
    <div id="navigationTop" style="height:30px;width:100%;border:green 2px solid; text-align:center;">Navigation Top</div>
    <div id="content1" style="height:100%;width:100%;border:red 2px solid;overflow:auto;max-height:950px">
        <div id="content" style="height:950px;width:100%;border:red 2px solid;">
            <img src="https://via.placeholder.com/3600" />
        </div>
    </div>
    <div id="thumbnails" style="height: 100px; width: 100%; border: pink 2px solid; text-align: center;">Thumbnails</div>
    <div id="navigationBottom" style="height: 30px; width: 100%; border: green 2px solid; text-align: center;">Navigation Bottom</div>
</div>

To get rid of this setting or hard coding fix height of parent I tried to set using jQuery, compute the screen height and set it. But still no luck.

 $(document).ready(function () {
        var height = $(document).height();
        document.getElementById('parent').style.maxHeight = height;
    });

I want to implement this in pure CSS or with minimal JS/jQuery. Just remember there should be only one vertical and horizontal scrollbars on the entire page and that too should be for content only.

many thanks in advance.

CodePudding user response：

You could try to lose the hardcoded values a bit and put them in some classes as well remove a few id's which may be overpowering each other. In dev tools, you can see which styles are being ignored. Then just keep an id on the parent and style it how you need defining the height, width, scroll etc. Put classes instead for example the main content and sub-content where you define how much the content should take set overflow and the sub-content will just take as much as you specify the rest will be scrollable. Having so many id's can create confusion and work incorrecntly.

CodePudding user response：

In the parent use

#parent{
   overflow:hidden;
}

and for content

#content{
    overflow:scroll;
}

and you have also set id="content" for two div elements. It will show effect only on last div. Try to use different ids or use classes instead.