Position the div at the bottom of the screen rather than at the bottom of its parent element

Question

Position the div at the bottom of the screen rather than at the bottom of its parent element

One of my HTML structures imitates an app layout with pages.

To understand the issue, please take a look at the JsFiddle link first.

.screen-emulator {
  width: 300px;
  height: 400px;
  background-color: red;
}

.head {
  width: 100%;
  height: 70px;
  background-color: blue;
}

.body {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.page {
  position: relative;
  width: 100%;
  height: 500px;
  background-color: black;
}

.page-test {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: violet;
}

<div class="screen-emulator">
  <div class="head">Head</div>
  <div class="body">
    <div class="page">
      <div class="page-test">page-test</div>
    </div>
  </div>
</div>

I am wondering if there is a CSS way to extend .page-test all the way to the end of the screen rather than its parent element (.page)?

The issue lies in the height: 100%; property of .page-test, causing it to reach the bottom of .page. I want to highlight that I cannot alter the HTML structure (even though it may fix the problem) and I do not know the height of .head in advance.

html css

Answer 1

Answer №1

Using flexbox could be the solution to the problem, if I have correctly understood the question at hand.

To start, ensure that you explicitly set the margin and padding of all elements to zero, a practice sometimes referred to as bootstrapping. This will override any default styles applied by the browser.

In order to achieve the desired layout, set the height of .screen-emulator to 100vh and designate it as the flex container. To maintain the unknown height of .head, use flex: none;. The .body should be set as the sole flex item occupying the remaining available height with flex: 1;. https://css-tricks.com/boxes-fill-height-dont-squish/

body,
.screen-emulator,
.head,
.body,
.page,
.page-test {
  margin: 0;
  padding: 0;
}

.screen-emulator {
  width: 300px;
  height: 100vh;
  background-color: red;
  display: flex;
  flex-direction: column;
}

.head {
  width: 100%;
  background-color: blue;
  flex: none;
}

.body {
  width: 100%;
  flex: 1;
  overflow-y: auto;
}

.page {
  position: relative;
  width: 100%;
  min-height: 100%;
  background-color: black;
}

.page-test {
  position: absolute;
  width: 100%;
  min-height: 100%;
  background-color: violet;
}

<div class="screen-emulator">

  <div class="head">
    <h1>Head</h1>
    <p>Random content</p>
  </div>
  <div class="body">
    <div class="page">

      <div class="page-test">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Senectus et netus et malesuada fames ac turpis egestas. Massa tincidunt dui ut ornare lectus sit amet. Posuere ac ut consequat
          semper viverra nam libero justo laoreet. Sit amet commodo nulla facilisi nullam vehicula ipsum a arcu. Phasellus vestibulum lorem sed risus. Congue eu consequat ac felis donec et odio pellentesque diam. Consectetur lorem donec massa sapien faucibus

        </p>
        <p>
          Nisl suscipit adipiscing bibendum est ultricies integer quis. Pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus. Netus et malesuada fames ac turpis egestas. Ultricies mi quis hendrerit dolor magna eget. Tellus mauris
          a diam maecenas sed enim. Turpis massa tincidunt dui ut ornare lectus sit. Dolor magna eget est lorem ipsum. Sit amet consectetur adipiscing elit ut. Id donec ultrices tincidunt arcu non sodales. Interdum consectetur libero id faucibus nisl

        </p>

      </div>

    </div>
  </div>


</div>

Answer 2

Using flexbox could be the solution to the problem, if I have correctly understood the question at hand.

To start, ensure that you explicitly set the margin and padding of all elements to zero, a practice sometimes referred to as bootstrapping. This will override any default styles applied by the browser.

In order to achieve the desired layout, set the height of .screen-emulator to 100vh and designate it as the flex container. To maintain the unknown height of .head, use flex: none;. The .body should be set as the sole flex item occupying the remaining available height with flex: 1;. https://css-tricks.com/boxes-fill-height-dont-squish/

body,
.screen-emulator,
.head,
.body,
.page,
.page-test {
  margin: 0;
  padding: 0;
}

.screen-emulator {
  width: 300px;
  height: 100vh;
  background-color: red;
  display: flex;
  flex-direction: column;
}

.head {
  width: 100%;
  background-color: blue;
  flex: none;
}

.body {
  width: 100%;
  flex: 1;
  overflow-y: auto;
}

.page {
  position: relative;
  width: 100%;
  min-height: 100%;
  background-color: black;
}

.page-test {
  position: absolute;
  width: 100%;
  min-height: 100%;
  background-color: violet;
}

<div class="screen-emulator">

  <div class="head">
    <h1>Head</h1>
    <p>Random content</p>
  </div>
  <div class="body">
    <div class="page">

      <div class="page-test">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Senectus et netus et malesuada fames ac turpis egestas. Massa tincidunt dui ut ornare lectus sit amet. Posuere ac ut consequat
          semper viverra nam libero justo laoreet. Sit amet commodo nulla facilisi nullam vehicula ipsum a arcu. Phasellus vestibulum lorem sed risus. Congue eu consequat ac felis donec et odio pellentesque diam. Consectetur lorem donec massa sapien faucibus

        </p>
        <p>
          Nisl suscipit adipiscing bibendum est ultricies integer quis. Pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus. Netus et malesuada fames ac turpis egestas. Ultricies mi quis hendrerit dolor magna eget. Tellus mauris
          a diam maecenas sed enim. Turpis massa tincidunt dui ut ornare lectus sit. Dolor magna eget est lorem ipsum. Sit amet consectetur adipiscing elit ut. Id donec ultrices tincidunt arcu non sodales. Interdum consectetur libero id faucibus nisl

        </p>

      </div>

    </div>
  </div>


</div>

Answer 3

Answer №2

.page-test {position: absolute;bottom: 0;width: 100%; height: 50%;background-color:violet;}

Does this meet your requirements? I adjusted the height for optimal visibility on JsFiddle

Answer 4

.page-test {position: absolute;bottom: 0;width: 100%; height: 50%;background-color:violet;}

Does this meet your requirements? I adjusted the height for optimal visibility on JsFiddle

Answer 5

Answer №3

Are you referring to this concept?

You can make calculations based on the viewport height using vh. Please keep in mind that older browsers do not support the calc function.

Upgraded to latest specifications

Given the requirement is to adapt to the dynamic height of the .head element, utilizing JavaScript is necessary. CSS does not facilitate retrieving values from the DOM and applying them, which is where JavaScript comes in handy.

document.addEventListener('DOMContentLoaded', function() {
  resizePage();
}, false);

document.addEventListener("resize", resizePage);

function resizePage() {
  var head = document.querySelector(".head");
  var pageTest = document.querySelector(".page-test");

  pageTest.style.height = "calc(100vh - " + head.offsetHeight + "px)";
}

.screen-emulator {
  width: 300px;
  height: 400px;
  background-color: red;
}

.head {
  width: 100%;
  height: 70px;
  background-color: blue;
}

.body {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.page {
  position: relative;
  width: 100%;
  height: 500px;
  background-color: black;
}

.page-test {
  position: absolute;
  width: 100%;
  height: 100vh;
  background-color: violet;
}

<div class="screen-emulator">
  <div class="head">Head</div>
  <div class="body">
    <div class="page">
      <div class="page-test">page-test</div>
    </div>
  </div>
</div>

Answer 6

Are you referring to this concept?

You can make calculations based on the viewport height using vh. Please keep in mind that older browsers do not support the calc function.

Upgraded to latest specifications

Given the requirement is to adapt to the dynamic height of the .head element, utilizing JavaScript is necessary. CSS does not facilitate retrieving values from the DOM and applying them, which is where JavaScript comes in handy.

document.addEventListener('DOMContentLoaded', function() {
  resizePage();
}, false);

document.addEventListener("resize", resizePage);

function resizePage() {
  var head = document.querySelector(".head");
  var pageTest = document.querySelector(".page-test");

  pageTest.style.height = "calc(100vh - " + head.offsetHeight + "px)";
}

.screen-emulator {
  width: 300px;
  height: 400px;
  background-color: red;
}

.head {
  width: 100%;
  height: 70px;
  background-color: blue;
}

.body {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.page {
  position: relative;
  width: 100%;
  height: 500px;
  background-color: black;
}

.page-test {
  position: absolute;
  width: 100%;
  height: 100vh;
  background-color: violet;
}

<div class="screen-emulator">
  <div class="head">Head</div>
  <div class="body">
    <div class="page">
      <div class="page-test">page-test</div>
    </div>
  </div>
</div>

Answer 7

Answer №4

To ensure that the height of the .page-test class matches that of the screen, you can set either the min-height or height to 100vh. This approach disregards the parent div's height and instead takes up the entire screen space (while potentially causing overflows).

Remember to make the following adjustments in your css:

.page-test {
  position: absolute;
  width: 100%;
  /* min-height: 100vh; */
  height: 100vh;
  background-color: violet;
}

Answer 8

To ensure that the height of the .page-test class matches that of the screen, you can set either the min-height or height to 100vh. This approach disregards the parent div's height and instead takes up the entire screen space (while potentially causing overflows).

Remember to make the following adjustments in your css:

.page-test {
  position: absolute;
  width: 100%;
  /* min-height: 100vh; */
  height: 100vh;
  background-color: violet;
}

Answer 9

Answer №5

If I understand correctly, you are looking to rearrange the order of your div elements. Recently, I used Bootstrap to achieve a similar layout adjustment for mobile view:

@media only screen and (max-width: 960px) {
  .col-xs-12 {
    display: flex;
    flex-direction: column-reverse;
  }
}

<div class="row">
  <div class="col-xs-12">
    <div>This content is shown at the top in desktop view and at the bottom on mobile devices.</div>
    <div>This content appears at the bottom in desktop view and at the top on mobile devices.</div>
  </div>
</div>

You can adapt this code to fit your specific needs. Does this help address your question?

Answer 10

If I understand correctly, you are looking to rearrange the order of your div elements. Recently, I used Bootstrap to achieve a similar layout adjustment for mobile view:

@media only screen and (max-width: 960px) {
  .col-xs-12 {
    display: flex;
    flex-direction: column-reverse;
  }
}

<div class="row">
  <div class="col-xs-12">
    <div>This content is shown at the top in desktop view and at the bottom on mobile devices.</div>
    <div>This content appears at the bottom in desktop view and at the top on mobile devices.</div>
  </div>
</div>

You can adapt this code to fit your specific needs. Does this help address your question?

Position the div at the bottom of the screen rather than at the bottom of its parent element

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The ID becomes corrupted when there is duplicate information in MYSQL

I am unable to connect my jQuery

Creating a Popup with a Hazy Background: A Step-by-Step Guide

Encountering issues when attempting to retrieve localized images within .vue files using a custom webpack configuration

Problem with cloning I-text in FabricJS

Choose certain table cells that do not have an identifier or any classes assigned to them

JQuery and CSS can be used to create a div overlay without impacting the positions of other divs on the

Saving a user with a BLOB avatar in Angular 5: Tips and Tricks for Success

What is the process for attaching an on-click event listener by utilizing an argument that is passed to a function in JavaScript?

When the window size is reduced (smaller than a page width), the layout of the page becomes distorted

Tips for saving information from a textarea into an HTML file

PHP script for converting HTML lists to plain text

Using static typing in Visual Studio for Angular HTML

Enhance the look of your application by customizing the caret color in JavaFX with

Learn the trick to make this floating icon descend gracefully and stick around!

Alter Elements in AngularJS Based on Their Relationship to Other Elements

The spinning icon in the button is activated when the list-group feature of Bootstrap 4.x is

Tips for incorporating image and text sections into a responsive layout

bourbon neat quadrilateral layout

issue when Internet Explorer is formatting text following an image