Ways to create a vertically expandable full-screen design

I am currently working on designing a full-screen layout where the content adjusts based on the size of the footer.

body {
  margin: 0;
  padding: 0;
}

.layout {
  height: 100vh;
  
  display: flex;
  flex-direction: column;

  background-color: yellow;
}

.layout__content {
  height: 100%;
  
  align-self: stretch;
  
  background-color: blue;
}

.content {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  
  background-color: green;
}

.content__text {
  background-color: white;
}

.footer {
  height: 20vh;
  
  background-color: red;
}
<div class='layout'>
  <main class='layout__content'>
    <div class='content'>
      <text class='content__text'>Here be dragons</text>
    </div>
  </main>
  <footer class='footer' />
</div>

If I change the height value within .footer, the content will fill the remaining space from the footer as intended. Everything is functioning correctly.

Now, I want to create another layout where if the combined height of the content and footer exceeds 100vh, a scrollbar should appear. If it does not exceed this height, the display should remain similar to the previous layout.

body {
  margin: 0;
  padding: 0;
}

.layout {
  min-height: 100vh;
  
  display: flex;
  flex-direction: column;

  background-color: yellow;
}

.layout__content {
  height: 100%;
  
  align-self: stretch;
  
  background-color: blue;
}

.content {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  
  background-color: green;
}

.content__text {
  height: 150vh;
  
  background-color: white;
}

.footer {
  height: 20vh;
  
  background-color: red;
}
<div class='layout'>
  <main class='layout__content'>
    <div class='content'>
      <text class='content__text'>Here be dragons</text>
    </div>
  </main>
  <footer class='footer' />
</div>

In the example, the text had a length of 150vh. The issue is that removing this value causes the content to collapse.

body {
  margin: 0;
  padding: 0;
}

.layout {
  min-height: 100vh;
  
  display: flex;
  flex-direction: column;

  background-color: yellow;
}

.layout__content {
  height: 100%;
  
  align-self: stretch;
  
  background-color: blue;
}

.content {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  
  background-color: green;
}

.content__text {
  background-color: white;
}

.footer {
  height: 20vh;
  
  background-color: red;
}
<div class='layout'>
  <main class='layout__content'>
    <div class='content'>
      <text class='content__text'>Here be dragons</text>
    </div>
  </main>
  <footer class='footer' />
</div>

Notes:

  1. I aim to modify attributes only within layout and layout__content.
  2. The footer can vary in height, making it challenging to hardcode values like height, min-height, max-height, etc., into other elements. In the given example, it was set at 20vh, but this is just for illustration purposes.

I have attempted several solutions:

  • layout - height: 1px;
  • layout-content - min-height: inherit;
  • layout-content - min-height: 100%;

If you have any ideas or suggestions, please share them!

htmlcss

Answer №1

I came up with a solution using double-dimensional flex-grow:

When the content content__text is short: 

body {
    margin: 0;
    padding: 0;
}

.layout {
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    background-color: yellow;
}

.layout__content {
    flex-grow: 1;

    display: flex;

    background-color: blue;
}

.layout__content-wrapper {
    flex-grow: 1;
}

.content {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: green;
}

.content__text {
    background-color: white;
}

.footer {
    flex-grow: 0;
    height: 20vh;

    background-color: red;
}
<div class='layout'>
    <main class='layout__content'>
        <div class="layout__content-wrapper">
            <div class='content'>
                <text class='content__text'>Here be dragons</text>
            </div>
        </div>
    </main>
    <footer class='footer'/>
</div>

For the same code, but when content__text is long: 

body {
    margin: 0;
    padding: 0;
}

.layout {
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    background-color: yellow;
}

.layout__content {
    flex-grow: 1;

    display: flex;

    background-color: blue;
}

.layout__content-wrapper {
    flex-grow: 1;
}

.content {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: green;
}

.content__text {
    /* Demonstration */
    height: 200vh;
    
    background-color: white;
}

.footer {
    flex-grow: 0;
    height: 20vh;

    background-color: red;
}
<div class='layout'>
    <main class='layout__content'>
        <div class="layout__content-wrapper">
            <div class='content'>
                <text class='content__text'>Here be dragons</text>
            </div>
        </div>
    </main>
    <footer class='footer'/>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Attempting to position the calendar control at the center in Visual Studio using C#

I'm currently working in Visual Studio using C# and I've encountered an issue with centering a Calendar control within a Panel. While I have successfully centered other elements such as radiobuttons, checkboxes, and textboxes in the panel, the t ...

c#cssasp.netvisual-studio-2013calendar

Having difficulty controlling the DOM using cheerio in a Node.js environment

I am currently working on a basic program using Node for the server side with cheerio. Here are the code snippets provided: Server Side: /** * Module dependencies. */ var express = require('express') , routes = require('./routes') ...

javascripthtmlnode.jscheerio

Instructions on how to load an HTTP file inside a Bootstrap modal

Is it possible to load a file located at an http:// address into a modal window? Something like this: <a class="btn btn-info btn-large" data-toggle="modal" href="#http://localhost/login.html"> <i class="icon-user icon-white"></i> Login ...

csstwitter-bootstrap

Array containing HTML code for Ionic framework

Just starting out with Ionic/Angular and I have a question. How can I display an array containing HTML content? { "code" : "06", "descr" : "Some text:</br>Other text.<br/>Other text</br>Other text." } When I try to print it, the HTML ta ...

htmlarraysangularionic-framework

Simple method to modify the text size of the entire HTML page

Looking for a way to adjust the font size of an entire HTML document? I'd like to have two buttons - one to increase the font size and the other to decrease it. Each button will trigger a JavaScript function; function increaseFontSize(){ //Increase ...

javascriptjqueryhtmlcss

Is it possible to dynamically change the color of a box shadow using an event handler?

I'm currently in the process of developing an application that consists of six distinct topics organized within a flexbox structure, complete with a box-shadow effect. My objective is to dynamically alter the color of the box-shadow through an event ...

javascriptjqueryhtmlcss

Tips for creating two lines of text within one line using CSS

My explanation skills are not the best. I have the words "Tasty Burger" stacked on top of each other, but I want them to be on a single line. .footer-container { margin: 25px 0; display: flex; gap: 3rem; align-items: center; justif ...

htmlcssflexbox

What criteria does the browser use to select the media type for filtering CSS links?

One of the pages on my website includes a link to a stylesheet specifically for printing purposes. <link rel="stylesheet" href="../print.css" type="text/css" media="print" /> While most browsers ignore this link and its styles when rendering for sc ...

cssinternet-explorer-7media

"Utilizing the power of Twitter Bootstrap and Snap.js for

I am currently working on integrating Snap.js by jakiestfu with Twitter Bootstrap. I have managed to make it work to some extent (I can slide the content and open a drawer through a click event). However, I am facing a challenge where the drawer content re ...

javascriptcsstwitter-bootstrapsnap.js

Summernote carries out encoded HTML scripts

Retrieving information from a MySQL database, the stored data appears as follows: <p>&lt;script&gt;alert('123');&lt;/script&gt;<br /></p> Upon fetching the data in its raw form, it displays like this: <script ...

htmljquerysummernote

What is the best way to apply a class to the initial div using jquery?

I have the following HTML code: <div class="main"> <div class="sub"></div> <div class="sub"></div> <div class="sub"></div> </div> <div class="main"> <div class="sub"></div> <di ...

jqueryhtml

conceal parent window element upon clicking an image within an iframe

I'm facing a challenge with hiding certain buttons in a parent window when opening a modal by clicking an image inside an iframe. Below is the code snippet that I am using: In the parent window - <iframe id="gallery" src="links/gallery.html" wid ...

javascripthtmliframe

Why is it important to incorporate the CSS property background-repeat: repeat; into our code?

It is believed that if you don't expressly mention the background-repeat in CSS styling, browsers will automatically set it as background-repeat: repeat. With this default behavior in place, one might wonder why there is even a need for a separate ba ...

htmlcss

Updating the scope variable in an AngularJS directive

Recently delving into Angular, I encountered an issue: I have both a list view and a details view with tags. To facilitate navigating between the two views and loading new elements from a service upon click events, I created a directive. My aim is to also ...

javascripthtmlangularjsangularjs-directive

Storing a JSON object using the caching capabilities of HTML5

As an intern with minimal technical experience, I apologize if my question appears basic. I have been searching for an answer for days without much success. My current project involves developing a Phone Directory. I am now working on creating a frequentl ...

jsonhtml

bridging information from tables with text fields in forms

I am working on an HTML/CSS page that utilizes a table layout filled with buttons to mimic a T9 keypad design. Within the page, I have a form containing two text fields. My aim is to populate these text fields with numbers based on the values from the tab ...

javascripthtml

Tips for ensuring your anchor links function properly with Ajax interactions

I have been working on transferring data from a MySQL database using AJAX with JSON as the datatype. Below is the code I've used: $("#klik_cari").click(function() { //ajax configuration $.ajax({ url: "<?php echo ...

jqueryhtmljsonajax

Flame-inspired CSS editor

My current CSS editing workflow goes something like this: I ask for feedback on a page Suggestions are given to make post titles bigger I use Firebug to inspect the post title element I locate the corresponding CSS statement in Firebug (like h2.post_title ...

csseditorfirebug

A guide on transforming HTML into a variable using JavaScript

Having trouble converting HTML to a JavaScript variable. This is my HTML code: <div onclick="openfullanswer('2','Discription part','This is the code part');"> I want to create this HTML code dynamically, but I&apo ...

javascriptjqueryhtml

WordPress woes: struggles with displaying Font Awesome icons

Issue with Font Awesome icons: displaying square boxes instead of icons Attempting to prototype a marketing page using Bootstrap and the latest Font Awesome file. However, encountering a problem where instead of icons, large square boxes are displayed on ...

htmlcssfont-awesome