Setup a portion of html page as scrollable?

flaviu2 · Jan 7, 2025

Hi. I don't know too much html, but I want to setup the following layout to my page:

To split the page in two, I wrote:

HTML:

<style>
body {
    font-family: Arial;


/*    color: #111111;
    background-color:#f0fae4;*/


    color: #f9f9ff;
    background-color:#161B1F;
}


.split {
    height: 100%;
    width: 50%;
    position: fixed;
    z-index: 1;
    top: 0;
    overflow-x: hidden;
}


.left {
    left: 0;
/*    background-color: RGB(240, 250, 228);*/
}


.right {
    right: 0;
/*    background-color: RGB(240, 250, 228);*/
}

and

HTML:

<body>
        <div class="split left">
            .. content layout 1
        </div>
        <div class="split right">
            <div class="so">
                some content layout 2
            </div>
            <div class="layout3">
                .... long content ...
            </div>
    </body>

how can I setup Layout 3 to be scrollable, but not Layout 2?

VBService · Jan 8, 2025

Check this out:

HTML:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

  </head>
  <body>
    <div class="split left">
      .. content layout 1
    </div>
    <div class="split right">
      <div class="layout-2">
        some content layout 2
      </div>
      <div class="layout-3">
        .... long content ...

        <!-- for demonstration -->
        <p style="height: 2000px"></p>
      </div>
    </div>
  </body>
</html>

CSS:

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: Arial;
  color: red;
  background-color: #161B1F;
}
.split {
  height: 100dvh; /* in <head> needs <meta name="viewport" ...> */
  width: 50dvw;   /* in <head> needs <meta name="viewport" ...> */
  position: fixed;
  top: 0;
  bottom: 0;
  overflow-x: hidden;

  background-color: lightcoral; /* for demonstration */
}

.left {
  left: 0;
}
.right {
  right: 0;
}
.layout-2,
.layout-3 {
  padding: .5rem;
}
.layout-2 {
  height: 10%;
  background-color: lightsalmon; /* for demonstration */
}
.layout-3 {
  height: 90%;
  overflow-x: auto;
  background-color: lightskyblue; /* for demonstration */
}

flaviu2 · Jan 8, 2025

In a test html document, works, let me implement it in the real one, and I'll let you know! Thanks!

VBService · Jan 8, 2025

How about trying CSS Grid?

HTML:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

  </head>
  <body>
    <div class="container">
      <div class="layout layout-1">
        .. content layout 1
      </div>
      <div class="layout layout-2">
        some content layout 2
      </div>
      <div class="layout layout-3">
        .... long content ...

        <!-- for demonstration -->
        <p style="height: 2000px"></p>
      </div>
    </div>
  </body>
</html>

CSS:

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: Arial;
  color: white;
  height: 100dvh;
  overflow-x: hidden;
}
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 3fr;
  gap: 0px;
  grid-template-areas:
    "layout-1 layout-2"
    "layout-1 layout-3";
 
  height: 100%;
}
.container .layout {
  padding: .5rem;
}
.layout-1 { grid-area: layout-1; }
.layout-2 { grid-area: layout-2; }
.layout-3 { grid-area: layout-3; }

.layout-1 {
  overflow-x: hidden;
  background-color: lightcoral; /* for demonstration */
}
.layout-2 {
  background-color: lightsalmon; /* for demonstration */
}
.layout-3 {
  overflow-x: auto;
  background-color: lightskyblue; /* for demonstration */
}

flaviu2 · Jan 8, 2025

It works. However, in the real html page, I have a big issue:

HTML:

.layout-1 {
    height: 10%;
    background-color: #334455;
}


.layout-2 {
    height: 90%;
    overflow-x: auto;
    background-color: #554433;
}

Layout 1 should have a fixed height, like 200 px, and the rest of the height should be Layout 2. How can I accomplish this?

VBService · Jan 8, 2025

flaviu2 said:
Layout 1 should have a fixed height, like 200 px, and the rest of the height should be Layout 2. How can I accomplish this?

At the beginning of this post you showed an image where Layout 1 takes up the entire height of the screen.

Is this the effect you had in mind?

HTML:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

  </head>
  <body>
    <div class="split left layout-1">
      .. content layout 1
    </div>
    <div class="split right">
      <div class="layout-2">
        some content layout 2
      </div>
      <div class="layout-3">
        .... long content ... layout-3

        <!-- for demonstration -->
        <p style="height: 2000px"></p>
      </div>
    </div>
  </body>
</html>

CSS:

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: Arial;
  color: red;
  background-color: whitesmoke;
}
.split {
  height: 100dvh; /* in <head> needs <meta name="viewport" ...> */
  width: 50dvw;   /* in <head> needs <meta name="viewport" ...> */
  position: fixed;
  top: 0;
  bottom: 0;
  overflow-x: hidden;

  background-color: lightcoral; /* for demonstration */
}

.left {
  left: 0;
}
.right {
  right: 0;
}
.layout-1 {
  height: 200px;
}
.layout-1,
.layout-2,
.layout-3 {
  padding: .5rem;
}
.layout-2 {
  height: 20%;
  background-color: lightsalmon; /* for demonstration */
}
.layout-3 {
  height: 80%;
  overflow-x: auto;
  background-color: lightskyblue; /* for demonstration */
}

flaviu2 · Jan 9, 2025

VBService said:
At the beginning of this post you showed an image where Layout 1 takes up the entire height of the screen.

Sorry for misunderstanding, Layout 1 have to be scrollable or not, depending of its content, the only fixed height should be Layout 2, so, Layout 1 and 3 should be scrollable or not, depending of its content.

The issue is for Layout 2 I don't think percentable height would work, because it has fixed content.

Like:

HTML:

.layout-2 {
  height: 20%;
  background-color: lightsalmon; /* for demonstration */
}

The needed value should be as pixels (in height), but once I use pixels as height, how can I do Layout 3 as scrollable or not?

Updated html layout:

VBService · Jan 10, 2025

Check this out:

HTML:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

  </head>
  <body>
    <div class="split left layout-1">
      .. content layout 1
    </div>
    <div class="split right">
      <div class="layout-2">
        some content layout 2
      </div>
      <div class="layout-3">
        .... long content ... layout-3
      </div>
    </div>
  </body>
</html>

CSS:

* {
  box-sizing: border-box;
}
:root {
  --fixed-height-layout-2: 200px;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: Arial;
  color: red;
  background-color: whitesmoke;
}
.split {
  height: 100dvh; /* in <head> needs <meta name="viewport" ...> */
  width: 50dvw;   /* in <head> needs <meta name="viewport" ...> */
  position: fixed;
  top: 0;
  bottom: 0;
  overflow-x: hidden;

  background-color: lightcoral; /* for demonstration */
}

.left {
  left: 0;
}
.right {
  right: 0;
}
.layout-1,
.layout-2,
.layout-3 {
  padding: .5rem;
}
.layout-1 {
  height: auto;
  overflow-x: auto;
}
.layout-2 {
  height: var(--fixed-height-layout-2);
  background-color: lightsalmon; /* for demonstration */
}
.layout-3 {
  height: calc(100% - var(--fixed-height-layout-2));
  overflow-x: auto;
  background-color: lightskyblue; /* for demonstration */
}

[ css calc ]

flaviu2 · Jan 10, 2025

Works like a charm! A million thanks! How can I help you either?

flaviu2 · Jan 10, 2025

In the real application, I am using this html document into a VC++/MFC application, and the html engine is on Internet Explorer level, so, the layout is incorrect due to

HTML:

.layout-1 {
    height: var(--fixed-height-layout-1);
}


.layout-2 {
    height: calc(100% - var(--fixed-height-layout-1));
    overflow-x: auto;
}

So, I need to find out anohter approach, anyway, on Opera/Edge everything looks fine.

VBService · Jan 10, 2025

Run this code as an HTML document in a VC++/MFC application and show me the output.

HTML:

<script>
  document.write(navigator.userAgent);
</script>

For example, Internet Explorer does not support fixed values in css.
Determining the exact version will help match the css values supported by its engine.

flaviu2 · Jan 12, 2025

VBService said:
Run this code as an HTML document in a VC++/MFC application and show me the output.

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.2; Win64; x64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; Zoom 3.6.0; Zoom 3.6.0)

VBService · Jan 12, 2025

flaviu2 said:
In the real application, I am using this html document into a VC++/MFC application, and the html engine is on Internet Explorer level, so, the layout is incorrect due to

HTML:

.layout-1 { height: var(--fixed-height-layout-1); } .layout-2 { height: calc(100% - var(--fixed-height-layout-1)); overflow-x: auto; }

Trident (IE11) supports calc() but does not support CSS variables,
so remove this line:

CSS:

:root {
  --fixed-height-layout-2: 200px;
}

and here make these changes

CSS:

.layout-2 {
  height: 200px;
  background-color: lightsalmon; /* for demonstration */
}
.layout-3 {
  height: calc(100% - 200px);
  overflow-x: auto;
  background-color: lightskyblue; /* for demonstration */
}

flaviu2 · Jan 12, 2025

VBService said:
Run this code as an HTML document in a VC++/MFC application and show me the output.

HTML:

<script> document.write(navigator.userAgent); </script>

For example, Internet Explorer does not support fixed values in css.
Determining the exact version will help match the css values supported by its engine.

I edited the latest post: Mozilla/4.0

flaviu2 · Jan 12, 2025

VBService said:
Trident (IE11) supports calc() but does not support CSS variables,
so remove this line:

CSS:

:root { --fixed-height-layout-2: 200px; }

and here make these changes

CSS:

.layout-2 { height: 200px; background-color: lightsalmon; /* for demonstration */ } .layout-3 { height: calc(100% - 200px); overflow-x: auto; background-color: lightskyblue; /* for demonstration */ }

Ok, I'll try.

flaviu2 · Jan 12, 2025

This code looks odd in IE:

HTML:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
body {
  margin: 0;
  padding: 0;
}
body {
    font-family: Arial;
    color: red;
    background-color: whitesmoke;
}
.split {
    height: 100dvh; /* in <head> needs <meta name="viewport" ...> */
    width: 50dvw;   /* in <head> needs <meta name="viewport" ...> */
    position: fixed;
    top: 0;
    bottom: 0;
    overflow-x: hidden;


    background-color: grey; /* for demonstration */
}


.left {
  left: 0;
}
.right {
  right: 0;
}
.layout-1,
.layout-2,
.layout-3 {
  padding: .5rem;
}
.layout-1 {
    height: auto;
    overflow-x: auto;
}
.layout-2 {
    height: 475px;
    background-color: black; /* for demonstration */
}
.layout-3 {
    height: calc(100% - 475px);
    overflow-x: auto;
    background-color: darkgrey; /* for demonstration */
}
    </style>
    </head>
    <body>
        <div class="split left layout-1">
          .. content layout 1
        </div>
    <div class="split right">
        <div class="layout-2">
            some content layout 2
        </div>
        <div class="layout-3">
            .... long content ... layout-3
        </div>
    </div>
  </body>
</html>

But looks fine in Opera/Edge.

flaviu2 · Jan 13, 2025

So, this one looks the same on Opera/Edge and Internet Explorer:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <style>
            .split {
                height: 100%;
                width: 50%;
                position: fixed;
                overflow-y: auto;
                overflow-x: hidden;
            }

            .left {
                height: auto;
                overflow-y: auto;
            }

            .right {
                right: 0;
                background-color: #ddd;
            }
            .top-right {
                height: 475px;
                overflow-x: auto;
            }
            .bottom-right {
                height: calc(100% - 475px);
                overflow-y: auto;
            }
        </style>
    </head>
    <body>
        <div class="split left">
            <h2>Left Section</h2>
            <p>This is the left half of the page. - auto (scroll if much content)</p>
        </div>
        <div class="split right">
            <div class="top-right">
                <h2>Right Section</h2>
                <p>This is the right half of the page - top (fixed)</p>
            </div>
            <div class="bottom-right">
                <p>This is the right half of the page - bottom, auto (scroll if much content)</p>
            </div>
        </div>
    </body>
</html>

But this one has a big issue: The split left has no scroll if the content is bigger than the screen height. How can I overcome this? I am close to solve this ...

VBService · Jan 13, 2025

Are you sure you want to have scroll in width (I mean ~~horizontally~~ - overflow-y)?

CSS:

.left {
  height: auto;
  overflow-y: auto;
}

My mistake: y is vertical

flaviu2 · Jan 13, 2025

VBService said:
Are you sure you want to have scroll in width (I mean horizontally - overflow-y)?

CSS:

.left { height: auto; overflow-y: auto; }

No, its a mistake there. I have tried a lot, and that one I missed.

flaviu2 · Jan 13, 2025

VBService said:

Check this out:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
 
    <style>
      html,
      body,
      body * {
        margin: 0;
        padding: 0;
        box-sizing: border-box; /* works in Trident (IE11) */
      }
      .split {
        height: 100%;
        width: 50%;
        position: absolute; /* works in Trident (IE11) */
        overflow: hidden;
      }
      .left {
        height: auto;
        overflow-x: auto;
      }
      .right {
        right: 0;
        background-color: #ddd;
      }
      .top-right {
        height: 475px;
      }
      .bottom-right {
        height: calc(100% - 475px);
        overflow-x: auto;
      }
      .left,
      .top-right,
      .bottom-right {
        padding: 8px;
      }
    </style>
  </head>
  <body>
    <div class="split left">
      <h2>Left Section</h2>
      <p>This is the left half of the page - auto (scroll if much content)</p>
    </div>
    <div class="split right">
      <div class="top-right">
        <h2>Right Section</h2>
        <p>This is the right half of the page - top (fixed)</p>
      </div>
      <div class="bottom-right">
        <p>This is the right half of the page - bottom, auto (scroll if much content)</p>
      </div>
    </div>
  </body>
</html>

Unfortunately, does not work correctly, once I put big content to split left, the scrollbar appears in the right side of the page, but the scroll should apper on split left and split right bottom only.

How to properly insert a landing page within same container beneath an image element?	1	Oct 7, 2024
Help with my responsive home page	2	Dec 14, 2022
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
Background image not showing up on html page	3	Sep 23, 2023
Having difficulty with the layout of these images / video for this web page	2	Jul 5, 2022
Dropdown menu in a fixed navbar	2	Apr 1, 2024
Justify-content not working	1	Mar 29, 2021
Need assistance finetuning HTML, CSS, Javascript - sticky header issue	3	Feb 25, 2022

Setup a portion of html page as scrollable?

flaviu2

VBService

flaviu2

VBService

flaviu2

VBService

flaviu2

Attachments

VBService

flaviu2

flaviu2

VBService

flaviu2

VBService

flaviu2

flaviu2

flaviu2

flaviu2

VBService

flaviu2

flaviu2

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads