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

Creating Radial Fades with CSS3

I would like to style the input checkbox using CSS

multiple elements sharing identical CSS styling

How can I trigger the execution of textarea HTML code with an onClick event using JavaScript?

"What's the best way to make sure a checkbox stays checked and its content remains visible after a

Adjust all children's height to match that of the tallest child

How can I extract text from a website without retaining number, dot, and alphabet bullets in the list?

Implementing key strokes in an HTML input field within a geckoWebBrowser

An interactive selection tool for a website's navigation bar

What could be causing one of my images to not appear on my Gatsby page?

Is it possible to utilize v-html with message data in Vue without any limitations on the <title> element?

No matter how much I try, the text refuses to align with the top-left corner

How can TypeScript be used to update the values and text of an HTML element?

I am looking to adjust the height of my MUI Grid component

Ways to toggle the display of a div depending on various radio button selections

Enhancing productivity with a more streamlined process for creating a responsive website design through the optimization of

Dropdown search menus are failing to appear in the correct location

Inconsistency with Mobile Viewport Problem

I am unable to retrieve images using the querySelector method

Utilizing BeautifulSoup in Python to Retrieve Content Enclosed by Header Tags