Stack three DIVs vertically on the entire screen with a fixed page margin, ensuring no need for a scroll bar

I need help creating a layout with 3 DIVs stacked vertically, each taking up one third of the screen without causing a scroll-bar to appear. I also want an 8px margin around all three of them. Here's an image for reference...

example image

Ultimately, I'd like a responsive design with 3 vertical sections and a uniform margin around them (No scroll-bar should be present)

This is my current CSS code:

body {
  margin: 8px;
  background: red;
}

.header {
  width:  100%;
  height: 33.33%;
  background: #fff;
}

.content {
  width:  100%;
  height: 33.33%;
  background: #ccc;
}

.footer {
  width: 100%;
  height: 33.33%;
  background: #777;
}
<div class="container">
  <div class="header">
    header
  </div>

  <div class="content">
    content
  </div>

  <div class="footer">
    footer
  </div>
</div>

The code works on liveweave.com, but not in Google Chrome browser.

htmlcssfrontendweb-deployment

Answer №1

To achieve a stacked layout using flexbox, you can utilize the flex-direction column property to arrange your divs vertically.

This setup results in a layout consisting of 3 divs, each occupying one-third of the viewport's height minus 16px (deducting the 8px top and bottom margins). By eliminating the 16px margin, you can prevent the appearance of a scrollbar.

Given that flex properties are applied, specifying exact percentages like 33.334% is unnecessary as the divs automatically expand to fill the available space evenly. With all 3 divs set to grow with flex-grow styling, they effectively represent thirds of the viewport height.

body, html {
  padding:0;
  margin: 0;
}
.container {
  padding: 8px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 16px);
  background: red;
}

.header {
  background: #fff;
  flex-grow: 1;
  display: block
}

.content {
  width:  100%;
  background: #ccc; 
  flex-grow: 1;
  display: block
}

.footer {
  background: #777;
  flex-grow: 1;
  display: block
}
<div class="container">
  <div class="header">
    header
  </div>

  <div class="content">
    content
  </div>

  <div class="footer">
    footer
  </div>
</div>

body, html {
  padding:0;
  margin: 0;
}

.container {
  padding: 8px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 16px);
  background: red;
}

header {
  background: #fff;
  flex-grow: 1;
  display: block
}

main {
  width:  100%;
  background: #ccc; 
  flex-grow: 1;
  display: block
}

footer {
  background: #777;
  flex-grow: 1;
  display: block
}
<div class="container">
  <header>
    header content
  </header>

  <main>
    content
  </main>

  <footer>
    footer content
  </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

Expand the object by clicking on it, causing the surrounding objects to move outside the viewport instead of appearing below

I'm facing a challenge with 3 squares inside one container, each occupying 33.33% of the viewport and placed next to each other. When I click on one square, it should expand to full viewport width and reveal hidden content, while the other two remain ...

jquerycssviewportexpand

Ways to maintain uniform size in displaying images even when they are of different dimensions

Within my web application, administrators have the ability to upload various images that will be displayed on the site. The challenge arises from the fact that these images come in different sizes and dimensions. However, it is important that all users w ...

angularjsimagecss

How to Build a Custom Toolbar with Left and Right Aligned Elements using React.js and Material UI

Struggling with updating the toolbar on my website. Wanting the site name and logo on the left side, while login/sign-up buttons fixed to the right. Logo and title are in place, but can't get buttons to stay on right margin. Here's the code: func ...

javascripthtmlreactjsmaterial-ui

Using Html to differentiate input based on type

Looking for input on the code snippet below: <table class="details-table" *ngIf="animal && animaldata"> <tr *ngFor="let attribute of animaldata.Attributes"> <td class="details-property">{{ attribute.AttributeLabel }}& ...

angularhtmltypescript

Retrieving Dropdown Values based on Selection in Another Dropdown

On my website, there are two dropdown lists available: 1) One containing Book Names 2) The other containing Links to the Books. All data is stored in an XML file structured like this: <?xml version="1.0" encoding="UTF-8"?> <BookDetail> <boo ...

javascripthtmlajaxxmlxslt

Svelte components loaded with no design aspects applied

I encountered an issue while trying to integrate the "Materialify" and "Carbon Components for Svelte" libraries into my Sapper project. The components seem to be loading, but without any associated styles. I followed the installation commands provided on t ...

cssuser-interfacesveltesapper

Design a blurred glass effect background with a circular spotlight focusing on a specific section of an HTML webpage

I've been attempting to achieve a frosted glass effect on a background, with a circular section unblurred. Unfortunately, my current implementation in the sandbox editor is not working as expected - the area of the circle remains blurred. If you&apos ...

css

Ways to move down only one level of an element's children, excluding sub-levels

When implementing this code snippet: jQuery: $(this).next().slideDown() with a selector :$(this).next() HTML: <li class="sub-menu two-level-collapse"> <a href="javascript:void(0);" class="two-level-collapse parent">< ...

javascriptjqueryhtml

Retrieve HTML elements from a string using PHP

Possible Matches: crawling a html page using php? Best methods to parse HTML I am trying to extract DOM elements from a string variable in my PHP script that contains an HTML page. How can I achieve this? For instance, if the string is something ...

phphtmlstringdomdocument

When a child element within a flex container has a relative position, the flex direction column will be overridden and

I'm having trouble with the code snippet below. For the .container, I have set display:flex; flex-direction: column; in order to position my previous and next arrows before and after the container items. However, the flex direction does not change ...

htmlcssflexbox

Removing jQuery error label from an HTML block

I need a single command that will remove an error label from my HTML when the field content is changed. It currently works on input and select elements, but not within an input-group. I am looking for a solution that will work universally across all instan ...

javascriptjqueryhtml

What methods are available to load sections of a complex SVG shape asynchronously?

I'm currently in the process of creating a website with a geographic map built using SVG, pulling data from OpenStreetMap. Due to its large size and potential for transformations such as zooming and moving, only a portion of it will be visible on the ...

javascripthtmlcsssvgcatiledlayer

Can I increase the top margin by more than mt-5?

Seeking help to align elements on my website. I've applied mt-5 in the HTML, yet require additional margin space. Any suggestions on how to achieve this? ...

htmlcssbootstrap-4margin

Display text with ellipsis on one of the two spans within a container

I'm struggling with implementing ellipsis in my HTML code. Here's what I have: <div id="wrapper"> <span id="firstText">This text should be displayed with an ellipsis</span> <span id="lastText">this text should not ...

htmlcss

Creating a CSS animation to repeat at regular intervals of time

Currently, I am animating an SVG element like this: .r1 { transform-box: fill-box; transform-origin: 50% 50%; animation-name: simpleRotation,xRotation; animation-delay: 0s, 2s; animation-duration: 2s; animation-iterat ...

javascriptcsssvgcss-animations

Combining DataTables with multiple tables sourced from various JSON arrays

I am trying to display data from two different arrays within the same JSON source in two separate tables, but my code seems to be malfunctioning. JSON Information: { "Policies": [ { "name": "A", "id": "1", "score": "0" } ], ...

javascriptjqueryhtmljsondatatables

I'm having trouble displaying the Facebook page plugin on my HTML website

I encountered a minor issue. I attempted to add the "Facebook page plugin" on a test website. I copied the code from the official Facebook plugin page: <!-- 1. Include the JavaScript SDK on your page once, ideally right after the opening <body> t ...

htmlfacebookplugins

CSS an act of misbehavior

I have noticed some unusual behavior on my website page. My website design can be viewed at Also, here is the same design in CMS format Please pay attention to the section under <div class="godelpage"> <a href="http://ryugaku.babonmultimedia ...

htmlcss

Having trouble displaying a background image with CSS

When I open Chrome from my code editor (WebStorm), the header image shows up perfectly. However, after closing WebStorm and manually opening index.html from my project folder, the header image fails to load/display. The CSS for the background image is bac ...

css

Tips for centering text on a webpage using the div element in HTML

I need help aligning the text "Monitoring Engineering Dashboard" to the right side of the image in the top-left corner. Currently, it is positioned below the image (Refer to the image below) <div style="width:1200px; margin:0 auto ...

htmlcsstext-align