What is the CSS method for determining the distance from the top of a container to the edge of the window?

Question

What is the CSS method for determining the distance from the top of a container to the edge of the window?

I am working on a basic HTML layout that contains a few elements, including a scrollable div container located below them.

Since the height of unknown-height is uncertain due to dynamic element generation, I need a simple method to enable scrolling in the div container while ensuring its height does not exceed the bottom of the window.

.scrollbar {
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #FF0000;
  overscroll-behavior-y: contain;
  height: calc(100vh - 100px) !important;
}

<p id="unknown-height">
  foo
</p>
<input type="text" />
<div class="scrollbar">
  <p>Foo</p>
<!-- Add as many Foo paragraphs as needed -->
</div>

html css

Answer 1

Answer №1

Here is the solution:

main container

apply flexbox to the container,
set the height
use a vertical flow for flex-orientation -> all child elements will occupy the full height of the container
add overflow hidden to conceal any overflow content

scrollable child

ensure overflow scroll on the child element

Note I included border colors for easy visualization of the end result.

.your-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  border: 1px solid blue;
}

.scrollbar {
  overflow-y: scroll;
  border: 1px solid red;
}

<div class="your-container">
  <p id="unknown-height">
    foo
  </p>
  <input type="text" />
  <div class="scrollbar">
  scrollbar
    <p>Foo</p>
    <p>Foo</p>
        ... (repeated lines for better visibility)
    <p>Foo</p>
  </div>
</div>

Answer 2

Here is the solution:

main container

apply flexbox to the container,
set the height
use a vertical flow for flex-orientation -> all child elements will occupy the full height of the container
add overflow hidden to conceal any overflow content

scrollable child

ensure overflow scroll on the child element

Note I included border colors for easy visualization of the end result.

.your-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  border: 1px solid blue;
}

.scrollbar {
  overflow-y: scroll;
  border: 1px solid red;
}

<div class="your-container">
  <p id="unknown-height">
    foo
  </p>
  <input type="text" />
  <div class="scrollbar">
  scrollbar
    <p>Foo</p>
    <p>Foo</p>
        ... (repeated lines for better visibility)
    <p>Foo</p>
  </div>
</div>

What is the CSS method for determining the distance from the top of a container to the edge of the window?

Answer №1

Similar questions

Is my directive not displaying the desired content on the HTML page?

Aligning a rotated paragraph in the middle of its parent container

The striped color override feature in Bootstrap appears to be malfunctioning in Internet Explorer 8

Utilizing an overlay to conceal both the body content and the input fields

Replacing inline CSS with styled components in Next.js Sass modules

Tips on displaying inline span text within an anchor element, above the anchor text

Issue with Hover Effect for Input Type in Submit Form in HTML and CSS

Having trouble with jQuery Animate when trying to change the background-color property?

Show each item in the list vertically, using a single unordered list but displaying them in

What is the best way to eliminate the final border in a row that has been applied using the <

Struggling with setting margins effectively in Bootstrap for the desired layout

Creating a responsive grid layout with HTML and CSS

What is the best method for retrieving the id from an <a> tag in HTML and passing it to a JSP

Can Django implement pagination without altering the URL structure?

How can I redirect a Spotify API request to save data directly to my local filesystem

The results of running 'npm run dev' and 'npm run build prod' are different from each other

Tips for arranging div elements in a grid-like matrix layout

Form submission not functioning within a bootstrap popover

What's the significance of the #/ symbol in a URL?

Combining Django and chartjs to create stacked multiple charts