What is the best way to make the middle div stretch and fill the entire width of the screen while taking into consideration headers and footers?

Check out this JSFiddle link for more details

<div class="navbar">
navbar
</div>
<section>
  <header>header</header>
  <div class="chat">
  chat window
  </div>
  <footer>
    <textarea>chat enter</textarea>
  </footer>
</section>

css:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: 1px solid gray;
}

.navbar {
  height: 2rem;
}

section {
  height: calc(100vh - 2rem);
}

.chat {
  background-color: green;
  height: 100%;
}

The goal is to ensure that the content fits perfectly within the viewport size without any overflow on different window sizes.

htmlcss

Answer №1

In my approach, I like to store the height of both the footer and headers in a CSS variable. This way, I can utilize min-height in conjunction with the calc() function.

:root {
  --header-height: 2rem;
  --footer-height: 4rem;
}

header {
  background-color: magenta;
  height: var(--header-height)
}

.chat {
  background-color: aqua;
  min-height: calc(100vh - var(--header-height) - var(--footer-height))
}

footer {
  background-color: green;
  height: var(--footer-height)
}
<header>header</header>
<div class="chat">
   This setup ensures that the footer remains at the bottom of the screen
</div>
<footer>footer</footer>

Utilizing min-height provides several advantages. Firstly, it allows your content to expand beyond the specified value (beyond 100vh). Secondly, it ensures that the footer always stays at the bottom of the screen, even if there isn't enough content to fill 100vh.

The flexibility of the calc() method enables you to use any unit type you prefer (%, px, em, rem, vh).

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

Changing the onclick function of an element with JavaScript

Is it possible to update the destination URL of a button using onclick? <div id="my_button" onclick="window.location.replace('/destination1')">Button<div> What if I wanted to change it to this? <div id="my ...

javascripthtml

The React modal window stubbornly refuses to close

import c from '../Profile.module.css'; import { useState } from 'react'; import { createPortal } from 'react-dom'; import Modal from '../Modal/Modal'; const TransactionItem = (props) => { const modalRoot = ...

htmlcssreactjs

Showcasing data from Django models in a tabular format

I am new to django and seeking assistance. I have developed a website but it's not fully operational yet. The model I created looks like this; from django.db import models class InductiveSensors(models.Model): Part_No = models.CharField(max_lengt ...

pythonhtmldjangourldjango-models

What is the best way to stack divs within a parent div that has a height set to auto?

Looking to stack two divs on top of each other within a parent div to create a tab system for an applet. The challenge is that the parent div has auto height and the exact height of the child divs is unknown. Absolute positioning allows me to stack the div ...

htmlcssz-indexpositioning

Placing a table within a div causes the div to expand in width beyond 100%

A situation has arisen where a table with a large number of columns (30 columns) is being affected by the white-space:nowrap style set on each th tag, causing the parent div to stretch unnaturally. How can this issue be resolved and allow for a horizonta ...

htmlcsshtml-table

The ng-style directive is not functioning properly

After selecting a category, I attempted to change the color using "ng-style" in my HTML code. However, it seems that the color change is not taking effect. This is the snippet from my HTML code: <div ng-repeat="item in ListExpense" ng-class-odd="&apos ...

cssangularjsionic-framework

Is it possible to center my tab on the page and add captions as well?

Struggling to align a tab with 3 image buttons in the middle, I resorted to using manual margin adjustments. I also added captions separately from the buttons for aesthetic purposes, but know this is not the correct way. Is there a way to attach the captio ...

htmlcssalignmentbootstrap-4

WordPress CSS Styling Issue: HTML Element Display Problem

I recently converted my static HTML site to WordPress, but I'm facing an issue where the site is always aligned to the left. Despite trying different solutions like the one below: body{ margin: auto; } The original HTML page was centered perfectly ...

phphtmlcsswordpress

How to dynamically set the image source in Vue.js using elements from a single object in a list

I currently have a collection of objects that only consists of an id and a path: export let carList = [ { id : ++id, path : "img/RedCar.png", }, { id : ++id, path : "img/BlueCar.png", }, ...

javascripthtmlvue.jsv-for

Is there a way to organize radio buttons that are located within separate div tags together?

How can I ensure that only one radio button across different divs is selectable? <div><input type="radio" /></div> <div><input type="radio" /></div> <div><input type="radio" /></div> <div><i ...

jqueryhtmlcss

What is the best way to position a div vertically on the right side of another div?

I've been experimenting with different padding and margins to try and position the div below the dotted div. My goal is to have the div that's currently at the bottom appear vertically aligned to the right of the other div, similar to the layout ...

htmlcssbootstrap-4

How can I use Ajax to show only one div on the entire page while keeping the CSS and other header content intact

One of my clients is looking to integrate a merch shop into their website. The existing merch page is not visually appealing and doesn't match the aesthetic of the client's site. I am considering using AJAX GET to fetch the content of the merch p ...

javascriptcssajaxjquery

CSS: Centralizing a Div Element with Fluid Width

I've created a popup that appears in the center of the screen using: transform: translate(-50%, -50%); and position: absolute. However, I'm facing an issue where the width of the popup remains fixed instead of adjusting dynamically based on the c ...

htmlcss

Adjusting the bottom property to a negative value in CSS will stretch the page downwards

I want to hide a portion of an HTML element at the bottom of the page and then reveal the entire element by sliding it upwards upon clicking with the help of CSS3 transitions. The expected behavior is for the part of the element extending below the page t ...

javascripthtmlcsscss-transitions

Having trouble positioning the button on the right side of the page and aligning the text in the center of the page

Having trouble positioning the button to the right of the page and aligning the text in the center, despite adding CSS properties such as float: right. <div id="project-heading" style = "margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padd ...

htmlcss

applying custom font to select boxes in bootstrap

Trying to style the select option text using a Poppins font with the following class: .poppinsregular14diese00000061 { font-family: Poppins; font-weight: 400; font-size: 14px; color: #00000061; } You can view the implementation in this fi ...

cssbootstrap-4

Elements on the page are being truncated beyond the visible viewport

Encountering an issue with a web page I'm currently developing that is proving challenging to explain. The problem occurs when the page is viewed in a small browser window and cuts off when scrolling horizontally to content outside of the viewport. Wh ...

htmlcss

Error Occurred While Setting Geolocation in Leaflet Webview Using Javascript/HTML SetView Function

I am attempting to showcase a remote HTML webpage in my Android Studio WebView. The webpage displays 2D geographic points data of a location zoomed in over the user's location, like this: var map = L.map('map', { layers: [osmMap], ...

javascriptandroidhtmlwebviewleaflet

Should I consider implementing Flexbox even if I need to cater to users still using IE9?

Currently, I am embarking on a fresh project centered around constructing a chat window. Typically, I would readily employ Flexbox for this endeavor; nevertheless, one of the stipulations for this project is to ensure compatibility with IE9. While I under ...

cssflexboxmodernizr

Issue with SCSS mixins not functioning correctly

I'm currently diving into mixin's with SCSS, attempting to create a basic mixin for styling buttons. However, I seem to be encountering some issues. It's likely that I've overlooked something obvious, but I'm feeling quite frustra ...

csssassscss-mixins