Create a page that expands to full height with the ability to scroll

Question

Create a page that expands to full height with the ability to scroll

I am trying to achieve a layout using flex that fills the entire height of the screen.

https://i.sstatic.net/s1RA5.png

My goal is to have a red background that scrolls based on the content inside. If there is more content, I want it to maintain the same size and just add a scroll bar. Is this possible with flex?

This is my current setup:

<style>
  .content {
    display: flex;    

  .content-left {
    display: flex;
    width: 512px;
    padding-right: 24px;
    flex-direction: column;
    padding-top: 56px;    

  .content-header {
    margin-bottom: 24px;
    
      small {
        display: flex;
        margin-bottom: 8px;
      }    
    }
  }
    
  .content-right {
    display: flex;
    width: 928px;
  }
</style>

<header>TEST<header>
<div class="container">
  <section class="content">
    <aside class="content-left">
      <div class="content-header">
        <small></small>
        <h1>
         TITLE
        </h1>
      </div>
      <section class="content-body">

      </section>
      <section class="content-footer">
       
      </section>
    </aside>
    <div class="content-right">
     
    </div>
  </section>
</div>

css flexbox

Answer 1

Answer №1

Does this link provide the answer to your question: https://example.com/codepen-solution ?

If it does, you are on the right track. Simply include the following code:

  .content-section{
    background-color:blue;
    height:250px ;
    max-height:250px;
    overflow:auto;
  }

Answer 2

Does this link provide the answer to your question: https://example.com/codepen-solution ?

If it does, you are on the right track. Simply include the following code:

  .content-section{
    background-color:blue;
    height:250px ;
    max-height:250px;
    overflow:auto;
  }

Answer 3

Answer №2

If you're looking to create elegant designs, the grid system is a fantastic tool to utilize.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 4;
}

.item3 {
  grid-column-start: 2;
  grid-column-end: 4;
}

.item1, .item3, .item2 div {
    padding: 10px;
}

.green {
    background-color: green;
}

.red {
    background-color: red;
}

<div class="grid-container">
  <div class="item1">header</div>
  <div class="item2">
    <div class="green">title</div>
    <div class="red">image or red something</div>
  </div>
  <div class="item3">aside aside aside aside aside aside aside aside aside aside aside aside</div>  
</div>

Answer 4

If you're looking to create elegant designs, the grid system is a fantastic tool to utilize.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 4;
}

.item3 {
  grid-column-start: 2;
  grid-column-end: 4;
}

.item1, .item3, .item2 div {
    padding: 10px;
}

.green {
    background-color: green;
}

.red {
    background-color: red;
}

<div class="grid-container">
  <div class="item1">header</div>
  <div class="item2">
    <div class="green">title</div>
    <div class="red">image or red something</div>
  </div>
  <div class="item3">aside aside aside aside aside aside aside aside aside aside aside aside</div>  
</div>

Create a page that expands to full height with the ability to scroll

Answer №1

Answer №2

Similar questions

What is the best method to customize CSS in ExtJS 5.0 by overriding a function?

Is the navigation item only clickable within its designated area?

Chrome is giving me trouble with the Select (dropdown) background image feature

Hide a header and bring it back after a 2-second delay

The only functioning href link is the last one

Retrieve the value of a CSS class property regardless of whether it is actively being utilized

What is the reason for the image not being positioned in the top left corner of the html page?

Create a dynamic HTML page using JavaScript

Unique arrangement of hexagons in a honeycomb layout with precise centering

Transforming Button style in jQuery Mobile version 1.3.0

Pick out grouped objects without the use of Javascript

Is there a way to ensure that the div is displayed on the same line?

Add content to the beginning of the input with the assistance of bootstrap. However, ensure that when utilizing "form-group row", the content is shifted

Maximizing space efficiency in Bootstrap 5

Bottom div refuses to adhere to the bottom of the page

Automatically changing the color of the navigation bar text

creating a div that functions similarly to a radio button

Transitioning the Background Image is a common design technique

Adaptable arrow-shaped progress bar featuring sleek transparent borders

Is there a way to arrange the outcomes in a single line?