Setup a portion of html page as scrollable?

flaviu2 · 2025-01-07T18:41:59+0000

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 · 2025-01-08T10:05:34+0000

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 · 2025-01-08T12:56:19+0000

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

VBService · 2025-01-08T13:17:05+0000

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 */
}

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

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads