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

React beautiful dnd and Material UI list encountering compatibility problem

I recently encountered an issue while using react beautiful dnd to create a rearrangeable Material UI List. Everything was working correctly, except for the ListItemSecondaryAction within the list. When dragging a list item, the ListItemText and ListItemIc ...

javascriptcssreactjsmaterial-uireact-beautiful-dnd

How can you align square cells within a container using CSS grids while maintaining a consistent grid gap?

Our objective is to perfectly align square cells with the edges of their container while maintaining a consistent gap between cells in each row and column. Although this Codepen solution is close, there are two key issues: (1) vertical spacing doesn' ...

htmlcsscss-grid

Tips for updating the selected value in Vue dynamically

I am currently working on a feature where the months change dynamically based on the selection made using Vue. You can view the code snippet in the link provided below. <div id="app"> <span class="selectboxWrap"> < ...

htmlvue.js

Dividing Trapezoid Shapes, Cropping Background Images

I am attempting to design a website layout with trapezoid shapes similar to the attached image. Each section should have a background image that fills the background with cover or a similar effect. I successfully created the first section (dark blue) usin ...

htmlcssbackground-imagecss-transformsclip-path

Issue with Ionic Grid: Row not occupying entire width of the container

Currently, I am working on creating a straightforward grid consisting of one row and seven columns. Each column holds a div with a single letter of text inside. My intention is for these columns to evenly space out across the page by default, but unfortu ...

htmlcssionic-framework

Troubleshooting the issue of browser prefix injections not functioning properly in Vue when using the

I've spent an entire afternoon on this issue and I'm completely stuck. After realizing that IE11 doesn't support grid-template, I learned that I need to use -ms-grid-columns and -ms-grid-rows instead. I am attempting to generate CSS and inje ...

javascriptcssvue.jsinternet-explorer-11

Unable to change the color of InputBase component's placeholder in React.js

I've been attempting to modify the color of the placeholder in an inputbase. I came across several methods online and tried implementing them, but none have been successful. Below are the codes I have tried. <InputBase id="input-id&quo ...

javascriptcssreactjs

Utilizing property validation in your codebase

How can I set up my code to display a warning in the console if the value of the Prop is not a string? The player-name prop should always be a string. If this: <greet :player-name="5"></greet> contains a number, I want my code below to generat ...

javascripthtmlvalidationvue.js

Exclusive JQuery Mobile Styles

Although I enjoy using JQuery Mobile, I'm facing compatibility issues with my custom Javascript on the page. Despite everything functioning correctly without JQuery Mobile, adding the library causes problems that I've been unable to resolve. Ess ...

jqueryjquery-uicssjquery-mobile

What is the best method for generating a comprehensive list of xpaths for a website utilizing Python?

Method I Attempting to generate a hierarchical tree of all the xpaths within a website () using Python, I initially aimed to acquire the xpath for the branch: /html/body with the following code: from selenium import webdriver url = 'https://startpag ...

pythonhtmlseleniumxpathtree

Identify the externally-sourced element of interest

I'm attempting to apply a ScrollReveal effect to an element loaded from a separate html file called "header.html". Unfortunately, the ScrollReveal animation is not working on this particular element, while other elements within my index.html are funct ...

javascriptjqueryhtmlscrollreveal.js

Tips for positioning a div between two vertically aligned input elements

I'm trying to figure out how to place a div between two inputs with the same height and vertically aligned. It seems like a simple task, but for some reason, the code below isn't working: input{ width: 35%; border: 1px solid #A7A7A7; ...

htmlcss

Tips for preventing the unwanted portrayal of a rectangle on canvas?

As a beginner in javascript, I am currently learning about the canvas. I have a question regarding drawing rectangles from right to left and seeing negative numbers in the inputs. Is there a way to display the real size of the rectangle regardless of the d ...

javascripthtmlcanvasnumbers

How can I show a Spinner component overlay in a TextField, replacing the usual iconProps rendering the icon in Fluent UI?

I am looking for a way to conditionally display the Spinner component in the exact location where an icon would normally appear if passed to iconProps in TextField. I have managed to implement conditional rendering of the icon and spinner, but incorporat ...

cssreactjsfluent-uifluentui-react

"Return to previous page" feature

I am having difficulty figuring out how to implement the "go back" function for the page. For instance, I have pages A, B, C, and D. The possible switching between pages is as follows: A -> (B <-> C) -> A or D -> (B <-> C) -> D (where A is the cata ...

javascripthtmlbrowser

Clicking to remove added child element

I have written a script that creates an image popup when the site loads. Here is the code: <script type="text/javascript"> function showPopup() { var div = document.createElement('div'); div.className += 'popup'; div.inne ...

javascripthtmlcss

Is it possible to dynamically change an ngModel value directly from the component?

I'm currently immersed in an Angular project and my initial file setup was like this: dog.ts: export interface Dog { name: string; age: number; breed: string; } dog.component.ts: import { Dog } from '../dog'; @Component({ //setup ...

javascripthtmlnode.jsangulartypescript

Tips for ensuring the pop-up submenu remains visible even when the cursor is outside the parent container and submenu during hover

Is there a way to keep the pop submenu visible even when the mouse hovers outside of its parent container or the submenu? Currently, if the mouse doesn't move straight down from the parent container (B) .account-settings-container to the top arrow of ...

csspopuphoverpositionmouseover

Issue with Angular / SCSS where animation is not being executed on the specified element

I have created a post component with a comment section. However, when I click on the comments, I want them to display smoothly with a nice animation effect. Even though I have added the necessary code for animations, it doesn't seem to work as expecte ...

cssangularanimationsass

Utilizing JavaScript to dynamically set a CSS file from an API in AngularJS

I am currently facing an issue with integrating a CSS file returned by an API into my entire website. Since the URL of the CSS file keeps changing, hard coding the URL is not feasible. While I have successfully implemented this on 'view1', my goa ...

javascripthtmlcssangularjs