A design featuring a two-column layout, with one column remaining static while the other

Question

A design featuring a two-column layout, with one column remaining static while the other

I just finished putting together a two-column layout.

<div class="layout">
  <div class="col1"></div>
  <div class="col2"></div>
</div>

Check it out here

There are a couple of things I'm wondering about:

Is there a way to make the right column scroll only when the mouse hovers over that side?
How can I prevent the right column from moving strangely? Sometimes, scrolling up creates white space above the column, or scrolling left/right adds extra space on the sides. (Note: This issue doesn't happen in JS Fiddle, but occurs on my MacBook using Safari).

html css

Answer 1

Answer №1

To ensure proper scrolling functionality, it is important to set the height of all relevant containers to 100% and then add overflow:auto to the specific column where you want the scroll to be enabled. Take a look at the straightforward example provided below, which eliminates the need for extra div layouts.

html, body, .col1, .col2 {
  height: 100%;
}

body {
  margin: 0;
}

.col1, .col2 {
  width: 50%;
}

.col1 {
  background-color: pink;
  position: fixed;
  left: 0;
  top: 0;
}

.col2 {
  background-color: silver;
  margin-left: 50%;
  overflow: auto;
}

<div class="col1">1</div>
<div class="col2">
  2
  <div style="height:200vh;">scroll test</div>
</div>

Answer 2

To ensure proper scrolling functionality, it is important to set the height of all relevant containers to 100% and then add overflow:auto to the specific column where you want the scroll to be enabled. Take a look at the straightforward example provided below, which eliminates the need for extra div layouts.

html, body, .col1, .col2 {
  height: 100%;
}

body {
  margin: 0;
}

.col1, .col2 {
  width: 50%;
}

.col1 {
  background-color: pink;
  position: fixed;
  left: 0;
  top: 0;
}

.col2 {
  background-color: silver;
  margin-left: 50%;
  overflow: auto;
}

<div class="col1">1</div>
<div class="col2">
  2
  <div style="height:200vh;">scroll test</div>
</div>

A design featuring a two-column layout, with one column remaining static while the other

Answer №1

Similar questions

There is an issue showing up in the console: $(…).datepicker is not defined as a function

Issue with Bootstrap checkbox/switch

When the screen is at mobile width, elements with the class "Responsive" are hidden using the display:none; property. These elements can be

Is it feasible to use a component in a recursively manner?

Leveraging an HTML form for searching and fetching data from MySQL Workbench using PHP

Generating unique names based on input from users

What is the best way to modify React state?

Incorporating .SVG files on an HTML webpage for logos and icons

How can the style of a div's :after pseudo-element be modified when hovering over its :before pseudo-element?

Requesting data asynchronously using AJAX and displaying the filtered results on a webpage using JSON

Incorporate hover and click functionality to the dropdown button using JQuery

Organizing grid elements within the popper component

Conceal the server's internal file structure to prevent it from being displayed in sources

Prevent Fixed Gridview Header from being affected by browser Scroll-bar using JQuery

Add some flair to your list by animating the text within it

Validation of Single Fields in Angular Reactive Forms

`Custom transitions between sections using fullpage.js`

Ways to make <li> elements display inline with React Bootstrap Rows and Columns

What is the best way to implement a function on every item within a specific class?

Skipping a JSON field in HTML/JavaScript when it is blank: A guide for developers