Container that can be scrolled under varying heights

Question

Container that can be scrolled under varying heights

Trying to structure some CSS in order to create a website that resembles the layout of a typical desktop application:

Almost there, but struggling to make the scrollable panel stick to the bottom of the viewport and show a scrollbar instead of overflowing off the page.

The following is the HTML and CSS I currently have:

HTML

<nav></nav> <!-- Fixed height header -->
<aside></aside> <!-- Fixed height/width sidebar -->
<main><!-- Right content area container -->
    <div class="top"></div> <!-- Right side top adjustable height panel -->
    <div class="toolbar"></div> <!-- Fixed height toolbar -->
    <div class="content"></div> <!-- Scrollable panel -->
</main>

CSS

nav {
  width 100%;
  height: 40px;
}

aside {
  width: 260px;
  position: absolute;
  top: 40px;
  bottom: 0;
}

main {
  position: absolute;
  left: 260px;
  top: 40px;
  bottom: 0;
  right: 0;
}

.top {
  position: relative;
  right: 0;
  left: 0;
  min-height: 200px;
}

.toolbar {
  height: 30px;
  position: relative;
  right: 0;
  left: 0;
}

.content {
  position: relative;
  top: 0;
  bottom: 0;
  overflow: auto;
  right: 0;
}

Although with the given CSS, the scrollable panel doesn't remain within the viewport as intended. Looking for a solution without JavaScript (as it's part of an Angular app and prefer not relying on JavaScript for positioning)

html css

Answer 1

Answer №1

If you want to achieve this specific layout, you can utilize the calc function effectively.

http://example.com/layout-demo

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: #333;
}

aside {
  position: fixed;
  top: 40px;
  left: 0;
  width: 200px;
  height: 100%;
  background: #666;
}

main {
  position: relative;
  top: 40px;
  width: calc(100% - 200px);
  height: calc(100% - 40px);
  margin: 0 0 0 200px;
  background: #999;
}

.section-top {
  height: 100px;
}

.section-toolbar {
  height: 40px;
  background: #fff;
}

.section-scrollable {
  height: calc(100% - 140px);
  overflow-y: scroll;
  background: #ccc;
  padding: 20px;
}

This code example is purely for demonstration purposes and not meant for production use. You can easily convert the magic numbers into variables using preprocessors like Sass or LESS for better maintainability.

Answer 2

If you want to achieve this specific layout, you can utilize the calc function effectively.

http://example.com/layout-demo

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: #333;
}

aside {
  position: fixed;
  top: 40px;
  left: 0;
  width: 200px;
  height: 100%;
  background: #666;
}

main {
  position: relative;
  top: 40px;
  width: calc(100% - 200px);
  height: calc(100% - 40px);
  margin: 0 0 0 200px;
  background: #999;
}

.section-top {
  height: 100px;
}

.section-toolbar {
  height: 40px;
  background: #fff;
}

.section-scrollable {
  height: calc(100% - 140px);
  overflow-y: scroll;
  background: #ccc;
  padding: 20px;
}

This code example is purely for demonstration purposes and not meant for production use. You can easily convert the magic numbers into variables using preprocessors like Sass or LESS for better maintainability.

Container that can be scrolled under varying heights

Answer №1

Similar questions

Some browsers are failing to display the navigation bar on my website

Using the `position: sticky` property does not function properly if the HTML element has a height set to

Hide object scroll percentage with CSS styling

Signs that indicate a socket has truly disconnected

Mixing percentage width with a fixed minimum width in CSS results in divs failing to align in a single line

The exterior DIV does not conform to shrinking dimensions

CSS - Implementing Multi-Line Text Wrapping

Unable to apply background-color CSS in playwright is not working as expected

Adapting Bootstrap components based on the screen size: Viewport-driven

What is preventing me from utilizing global variables in distinct HTML and JavaScript files?

Tips for seamlessly integrating an overlay into a different image

Avoiding the page from scrolling to the top when the sidebar is opened (NextJS, Typescript, TailwindCSS)

Invisible boundary line within the column

Is there a way to position right and left divs within a content div on the same top-level?

Refreshing Div Element with PHP AJAX POST请求

Adjusting the size of the post title's font

All the optgroups in the select picker are being duplicated from the first optgroup

Utilize a function within styled-components

Tips for maintaining the footer at the bottom of the page regardless of the screen size

Steps to Deactivate Dates in React Beautiful Dates Component