Guide to dividing the screen into three horizontal sections

Question

Guide to dividing the screen into three horizontal sections

I am currently working on a website and trying to divide a page into three different sections:
one for the title and a button,
one for the content,
one for the text input.

.

The issue I'm facing is that the divs are not filling the height and width of the screen. Additionally, the second div requires a scrollbar due to its variable content length.

I am looking for a solution using CSS, but I am open to any suggestions.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Server Messaging</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  <div style="width:100vh; height: 100vh;">//container for the 3 divs
    <div style="width:100%; height: 15%;">//div1
      <h1>Welcome User</h1>
      <a href = "logout.php"><button class=button>LOG OUT</button></a>
    </div>
    <hr>
    <div style="width:100%; height: 70%; overflow-y: scroll; overflow-x: hidden;">//div2
      //php content
    </div>
    <hr>
    <div style="width:100%; height: 15%;">//div3
      <textarea name="message" rows="3" cols="100"></textarea>
    </div>
  </div>
  </body>
</html>

html css

Answer 1

Answer №1

If you want to adjust container heights based on the viewport height, you can utilize the vh unit in CSS.

body {
  margin: 0;
}
.vh-15 {
  min-height: 15vh;
}
.vh-70 {
  min-height: 70vh;
}

/* for illustration */
.bg-red   { background: red;   }
.bg-green { background: green; }
.bg-blue  { background: blue;  }
div       { color: white;      }

<div class='vh-15 bg-red'>   1: 15% </div>
<div class='vh-70 bg-green'> 2: 70% </div>
<div class='vh-15 bg-blue'>  3: 15% </div>

Answer 2

If you want to adjust container heights based on the viewport height, you can utilize the vh unit in CSS.

body {
  margin: 0;
}
.vh-15 {
  min-height: 15vh;
}
.vh-70 {
  min-height: 70vh;
}

/* for illustration */
.bg-red   { background: red;   }
.bg-green { background: green; }
.bg-blue  { background: blue;  }
div       { color: white;      }

<div class='vh-15 bg-red'>   1: 15% </div>
<div class='vh-70 bg-green'> 2: 70% </div>
<div class='vh-15 bg-blue'>  3: 15% </div>

Answer 3

Answer №2

To tackle this issue, I'd suggest employing flexbox as the solution. The values assigned to the children are interrelated. I've configured mine based on a scale of 100, but keep in mind that these numbers are simply placeholders. For instance, instead of using 70 and 15, you have the option to swap them out for 700 and 150.

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

.top,
.bottom {
  flex: 15;
}

.middle {
  flex: 70;
}

/****************** 
  Presentational
******************/

.middle { background-color: green; }
.middle::after { content: '2: 70%'; }
.top { background-color: red; }
.top::after { content: '1: 15%'; }
.bottom { background-color: blue; }
.bottom::after { content: '3: 15%'; }
.container > div { position: relative; }
body { margin: 0; }
.container > div::after {
  position: absolute;
  top: 50%;
  left: 2rem;
  transform: translateY(-50%);
  color: white;
  display: block;
  font-family: sans-serif;
}

<div class="container">
  <div class="top"></div>
  <div class="middle"></div>
  <div class="bottom"></div>  
</div>

Answer 4

To tackle this issue, I'd suggest employing flexbox as the solution. The values assigned to the children are interrelated. I've configured mine based on a scale of 100, but keep in mind that these numbers are simply placeholders. For instance, instead of using 70 and 15, you have the option to swap them out for 700 and 150.

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

.top,
.bottom {
  flex: 15;
}

.middle {
  flex: 70;
}

/****************** 
  Presentational
******************/

.middle { background-color: green; }
.middle::after { content: '2: 70%'; }
.top { background-color: red; }
.top::after { content: '1: 15%'; }
.bottom { background-color: blue; }
.bottom::after { content: '3: 15%'; }
.container > div { position: relative; }
body { margin: 0; }
.container > div::after {
  position: absolute;
  top: 50%;
  left: 2rem;
  transform: translateY(-50%);
  color: white;
  display: block;
  font-family: sans-serif;
}

<div class="container">
  <div class="top"></div>
  <div class="middle"></div>
  <div class="bottom"></div>  
</div>

Guide to dividing the screen into three horizontal sections

Answer №1

Answer №2

Similar questions

Is it possible to align images vertically with text in a multi-column Bootstrap 4 container?

Issue with scrolling up on a responsive table when using Bootstrap-select

Substitute the information in the table with new data

What is the best way to eliminate all borders from a select box?

Trouble with CSS: Struggling to apply margins to a line of images in React JS

Is there a way to modify the style value within AngularJS?

When hovering or mousing over, the text remains stationary and does not follow the scroll bar movement within the

Mastering the art of combining images and text harmoniously

Tips for automatically adjusting the height of the footer

Can an HTML DOM object be converted to a JSON string using JSON.stringify in JavaScript?

Selenium is unable to interact with iframes

Encountering a NextJS error with head component

Ways to create a scrolling effect for a datalist dropdown menu

Retrieve the content of a specific HTML tag using JavaScript

The request to access /test.php has resulted in an error (404) indicating that the file cannot be found

When utilizing the Express framework, the object req.body is initially empty when collecting data from a basic

Issue with IntersectionObserver not detecting intersection when the root element is specified

Controller function failing to trigger

Tips for combining multiple fields into a single variable in PHP

button that takes you back to the top of a mobile website