When defining the viewport height for a new div, remember to disregard the height of any existing div

I am currently designing a webpage layout that consists of a header navigation, two rows of banner images, and additional content divs below the banners.

My goal is to set the height of the navigation bar at 90px, with the two rows of banners evenly dividing the remaining viewport height of the user's browser. Additionally, I want the following divs below the banners to have fixed pixel heights.

Below is an excerpt from my simplified code:

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

.nav {
  background: red;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banners-row-1 {
  background: green;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
}

.banners-row-2 {
  background: orange;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
}

.mailing-list {
  height: 115px;
  background: pink;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer {
  height: 117px;
  background: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="nav">
  This is the nav
</div>
<div class="banners-row-1">
  Banners Row 1
</div>
<div class="banners-row-2">
  Banners Row 2
</div>
<div class="mailing-list">
  Mailing List
</div>
<div class="footer">
  Footer
</div>

Although the banner rows are currently set to 50vh, which is almost what I need, I am wondering if there is a way to factor in the 90px height of the navigation bar when calculating the viewport height for the banner divs?

In essence, I am looking for a solution where the banner rows occupy 50% of 'viewport height minus 90px'...?

Thank you

htmlcssheightviewport

Answer №1

Enclose your navigation and banners within a wrapper and apply the following flex properties:

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

.nav {
  background: red;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrap {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.ban {
  flex: 1;
}
.banners-row-1 {
  background: green;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banners-row-2 {
  background: orange;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mailing-list {
  height: 115px;
  background: pink;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer {
  height: 117px;
  background: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="wrap">
  <div class="nav">
    This is the nav
  </div>
  <div class=" ban banners-row-1">
    Banners Row 1
  </div>
  <div class="ban banners-row-2">
    Banners Row 2
  </div>
</div>
<div class="mailing-list">
  Mailing List
</div>
<div class="footer">
  Footer
</div>

This setup functions by allocating space in .wrap as follows: .nav has a fixed height of 90px .bans have equal remaining space ((100vh - 90px) / 2)

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

The horizontal scrollbar in Chrome is unexpectedly activated, despite elements being set to occupy the full screen width (100vw) using Tailwind and NextJS 13.4+

It took some time to identify the root cause of this issue within a larger project. Hopefully, this Question and Answer will be beneficial to someone else. Here is the scenario -- in a NextJS/Tailwind project, there is only one large vertical element on t ...

cssnext.jstailwind-css

Exploring Event Propagation in AngularJS

Currently, I am working on developing a web application using angularjs for the first time. A key feature that I aim to introduce is the ability for users to create a div in the main window upon clicking on an image in the menu. To achieve this functional ...

javascripthtmljqueryangularjsjquery-events

Add a background image to the parent element while preserving the existing background color

Can you help me figure out how to apply a background image to the menu while still keeping the background color? HTML: <div class="top"> <div class="menu"> Nop. </div> Nam hendrerit erat eget tellus mollis facilisis. ...

htmlcss

Splitting the page into four sections with a unique H layout using CSS styling

Attempting to create an H page layout: body { background-color: grey; background-size: 100%; background-repeat: no-repeat; } html, body { height: 100%; margin: 0px; } .a { float: left; width: 25%; height: 100%; border: 1px solid blue ...

htmlcssflexboxcss-float

Align navigation items in the center of the navigation container

I've been grappling with aligning the content of a nav-item inside a nav container in my project. I'm unable to apply a margin on the ul>li items as it doesn't adjust properly on different resolutions. I've tried using percentages, b ...

htmlcssbootstrap-4

Is there a way to integrate the javascript and jQuery functions in order to conceal a button?

I recently acquired the File Upload script known as Simple Photo Manager and I am looking to incorporate jQuery functions with the existing JS code in the script. My main goal is to make the Delete button disappear once it has been clicked. However, I am ...

javascriptjqueryhtml

employing JavaScript to present an image

Here is the image code I have: <img id="imgId" src="img/cart.png" style="display: none"/> After clicking a button, it triggers a JavaScript function to show the image document.getElementById("imgId").style.display = "inline" The image display ...

javascriptcss

Guide to displaying a table enclosed in a div based on a selected value in a select dropdown?

I am attempting to retrieve the table options using the select question-picker: Here is what I have tried: $(document).ready(function() { var question_container = $('.question-picker option[value="1"]').parent(); console.log(question_cont ...

javascriptjqueryhtml

What separates text-align:center from margin auto?

As someone who is just beginning to learn about CSS, I have come across the properties: text-align:center; and margin:auto; Both of these seem to center elements, but how exactly do they differ from each other? Any insights would be much appreciated. T ...

css

Angular JS application failing to load in browser due to a simple issue

I recently completed working on two pages index.html and app.js, which were created while following a helpful tutorial found here. The structure and content of each page are outlined below: index.html <!DOCTYPE html> <html ng-app ="store"> ...

angularjshtml

Is it possible to incorporate multiple gradients into the border-image?

When it comes to the background-image, you have the freedom to include as many radial-gradient and/or linear-gradient as you want. However, for the border-image, it appears that only one gradient can be added. This seems peculiar since the display principl ...

htmlcssborderborder-image

Tips for modifying the class of a span inline element using a javascript function

Looking for assistance in creating a password text box with an eye icon that toggles visibility. When the user clicks on the eye icon, it should change to a crossed-out eye icon and switch the input type to text. <div class="input-group show-hide-passw ...

javascriptcssbootstrap-4

What is causing my divs not to center with justify-content?

I've been working on centering two divs inside a parent div horizontally. The parent div is set to flex-direction: column so that the child divs stack one below the other, but I want them centered in the middle of the page. Although justify-content: ...

htmlcssflexbox

What are the best methods for preserving paint color when changing wheel styles, and vice versa?

I posted this query about a year ago, but I did not have a fiddle prepared at that time and my question was not as well articulated as it could have been. Despite that, many people came forward to offer their help, and I am truly grateful for that. This ti ...

javascripthtmlcssimagelogic

Achieve center alignment for two column divs without altering the HTML code using only CSS

Recently, I stumbled upon a basic HTML code that I am unable to modify due to restrictions: <div id="container"> <div id="a"> Title col </div> <div id="b"> Left col </div> <div id="c"> ...

htmlcss

Guiding you to choose a specific child class by identifying its parent class in CSS and jQuery

Hey there! I'm currently working on a website that allows users to post content. I want to ensure that the site is mobile-friendly, so I need to make some adjustments with media queries. Unfortunately, I've run into an issue where media query CS ...

jquerycssclassmedia-queriesparent

Achieve a smooth slide-in effect from the left for your sidebar when the button is clicked using TailwindCSS

I am currently working on a sidebar menu with a button that toggles its visibility. However, I am struggling to implement a sliding animation from the left when the sidebar appears, and a slide back to the right when it closes. This is what my code looks ...

htmlcssreactjscss-transitionstailwind-css

Can bootstrap columns be offset only on large devices?

Is there a way I can have the title column float to the right side of the page only on medium devices and larger screens, while keeping it centered for smaller devices like phones? Any advice is appreciated! <div class="section header"> <div ...

htmlcsstwitter-bootstrap

Stop iframes on iOS from automatically adjusting their height based on the content within them

Update: I recently discovered that Apple quietly prohibits fixed-size iframes in iOS. How frustrating! What can be done to make an IFrame responsive in iOS Safari? I am facing a seemingly straightforward task: embedding a fixed-size <iframe> within ...

cssiframewkwebview

Enhancing the appearance of React Native components by incorporating borderColor results in the emergence of

In my current React Native project, there is a profile component that includes the following design: https://i.sstatic.net/URrN6.png The profile container is styled with a backgroundColor of '#fff', and the pencil icon has a borderColor of &apo ...

cssreactjsreact-native