Search code examples
htmljquerycssstyles

Implment child div with scrollbars to show big content while keeping parent and other siblings intact

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.

Solution

  • UPDATE

    html{
  height: 100%;
}
body{
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  height: 100%;
}
#parent{
  overflow: hidden;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#navigationTop{
  height: 30px;
  width: 100%;
  border: green 2px solid;
  text-align: center;
}
#content1{
  height: 100%;
  width: 100%;
  overflow-y: scroll;
}
#content{
  width: 100%;
  height: 100%;
}
#thumbnails{
  height: 100px;
  width: 100%;
  text-align: center;
}
#navigationBottom{
  height: 30px;
  width: 100%;
  text-align: center;
}
    <html>
<body>
<div id="parent" style="">
    <div id="parent">
    <div id="navigationTop">Navigation Top</div>
    <div id="content1">
        <div id="content">
            <img src="https://via.placeholder.com/3600" width="300" />
        </div>
        <div id="thumbnails">Thumbnails</div>
    </div>
    <div id="navigationBottom">Navigation Bottom</div>
</div>
</div>
</body>
</html>

    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.