The height appears differently on Mozilla compared to the Chrome browser

I currently have three sections on my website:

  1. "Header" with a height of 100px.
  2. "Content Area" with a height of 462px.
  3. "Footer" with a height of 100px.

The strange issue I am facing is that in Chrome, the scroll bar is invisible (which is ideal), but in Mozilla Firefox, the scroll bar is visible. I'm not sure why this is happening as the same code works perfectly fine in Chrome. Below is my code - PLEASE HELP! This seems to happen to me quite frequently.

body {
  padding: 0;
  margin: 0;
}

h1,
h2,
h3 {
  margin: 0;
  padding: 0;
  color: #fff;
}

.header {
  height: 100px;
  background: red;
  width: 100%;
}

.content-area {
  min-height: 462px;
  width: 100%;
  background: grey;
}

.footer {
  height: 100px;
  background: black;
  width: 100%;
}
<header class="header">
  <h1>Header</h1>
</header>
<div class="content-area">
  <h2>Content Area</h2>
</div>
<footer class="footer">
  <h3>Footer</h3>
</footer>
javascriptjqueryhtmlcssbootstrap-4

Answer №1

Give this method a try:

.content-area {
  min-height: calc(100vh - 200px);
  width: 100%;
  background: grey;
}


body {
  padding: 0;
  margin: 0;
    }

h1,
h2,
h3 {
  margin: 0;
  padding: 0;
  color: #fff;
}

.header {
  height: 100px;
  background: red;
  width: 100%;
}

.content-area {
  min-height: calc(100vh - 200px);
  width: 100%;
  background: grey;
}

.footer {
  height: 100px;
  background: black;
  width: 100%;
}
<header class="header">
        <h1>Header</h1>
      </header>
      <div class="content-area">
        <h2>content area</h2>
      </div>
      <footer class="footer">
        <h3>Footer</h3>
      </footer>

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

"Utilize gulp-connect to store the root as an array

The gulp-connect documentation mentions that options.root can accept either an array or string. My situation involves having a build directory that I want to use as the root, along with a separate sources directory where all my source maps are located. Is ...

javascriptnode.jsgulp

Issue with jQuery DataTables column.width setting failing to meet expectations

Currently, I am utilizing datatables for my project. According to the datatables documentation found here, it suggests using the columns.width option to manage column width. However, when I implement columns.width and render the table, it seems to disreg ...

jqueryhtmlcssdatatables

JQuery Validation appears to be failing to validate

Having some trouble with the JQuery validator plugin in my Rails app. It's not displaying any errors or validating anything. Can't seem to figure out what's wrong with my code. Any assistance would be greatly appreciated! $(document).ready( ...

jqueryjquery-pluginsjquery-validate

Ways to modify the attribute of an element in an ImmutableList({}) nested within Immutable.Map({})

Is there a way to modify the property of an item within an ImmutableList({}) that is nested inside an Immutable.Map({})? This is my current setup: const initialState = Immutable.Map({ width: window.board.width, height: window.board.height, li ...

javascriptreactjsimmutabilityimmutable.js

What is the best way to save variables in PHP for later use in various scripts?

As a newcomer to PHP programming, I am facing a rather simple issue that I haven't been able to solve despite trying various methods and searching online for a solution. Any assistance you can provide would be greatly appreciated. The problem at hand ...

phphtmlmysqlvariablesglobal-variables

ReferenceError: source is not defined in Gulp with Browserify

I encountered a strange error while working on my project. The error message I received is as follows: $ gulp browserify [01:21:03] Using gulpfile F:\CSC Assignments\FinalProject\HotelProject\gulpfile.js [01:21:03] Starting 'bro ...

javascriptgulpbrowserify

Disabling the ESC key from clearing input fields in Bootstrap-5: A step-by-step guide

I have come across this code snippet for a search field: <form class="container" role="search"> <div class="row"> <div class="col-12"> <input name="searchItem" #search ...

htmlangularbootstrap-5

Positioning a flex item to the right by using float

I am in need of assistance with my HTML layout. <div class="container"> <div class="sidebar" style="float:right"> Ignore sidebar? </div> <div> main content </div> </div> The container is set to have a flex disp ...

htmlcssflexbox

Is there a way to modify Bootstrap tabs when they are hovered over?

This may seem like a simple question, but I've been struggling to figure it out. I'm attempting to have the bootstrap tabs switch when the mouse hovers over them. <div class="container"> <nav class="nav nav-tabs" ...

javascriptjquerybootstrap-5

What could be the reason for my empty $routeProvider?

Question: I'm facing an issue with the $routeProvider in my code. Here's my configuration: $routeProvider .when('/language/:countryCode', routing) .when('/promotion/:promotionCode', routing) .otherwise ...

javascriptangularjsroutesroute-provider

Transforming Objects with THREE.js: Navigating the Order of Transformations

Currently learning THREE.js and facing a bit of a newbie issue. I have a JSON object with dynamic updates, containing data for 4 walls. The JSON structure is as follows: { ... walls: [{ start: { x : 0, y : ...

javascriptthree.js

Reorganize CSS properties within a Json object

I am experiencing difficulties rearranging my sortable divs using jQuery. After moving the divs and saving their ID, top, and left positions, I retrieve data from a JSON file. However, when I try to move the divs back to their saved positions, I encounte ...

jqueryhtmlcssjson

Transferring PHP array data to JavaScript using JSON

Hello there! I'm currently working with a PHP file that uses json_encode to encode an array. This file is then accessed by the jQuery ajax function to fetch the array. However, I'm having trouble understanding how to properly utilize the array. W ...

jqueryajaxarraysjson

The stretched link in the card is not expanding as expected

I'm looking to achieve this effect Check out my code with added Bootstrap columns and rows The link in the code is not stretched as expected, it appears as a standard button link. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/ ...

htmlbootstrap-4bootstrap-cards

Retrieving PokéAPI image information

My goal is to display images from the PokéAPI on my app's homescreen when it is opened. However, I am facing a challenge where I need to call 30 different APIs in order to show 30 images. Calling these APIs one after another every few seconds seems l ...

javascriptreactjsreact-nativeaxios

What is the best way to test a try/catch block within a useEffect hook?

Hey, I'm currently dealing with the following code snippet: useEffect(() => { try { if (prop1 && prop2) { callThisFunction() } else { callThatFunction() } ...

javascriptreactjsjestjs

Position two buttons on the right side of the text

Is there a way to align two buttons on the far right side of a block of text? I want all the content to be in line, with the text on the left and the buttons on the right. While I've found solutions for aligning one button, I'm struggling to get ...

htmlcssangular

The Struggle with Bootstrap Accordion

I'm currently in the process of learning bootstrap. I copied the code for the 'Flush' Accordion from the bootstrap docs, but my version looks completely off. Despite linking the CSS stylesheet and JS Bundle, it doesn't seem to align pro ...

htmlcssbootstrap-5

Can someone help me understand why my component is not rendering when placed inside a conditional block, but it renders fine on its own?

I want to display a specific page only if the user is currently logged in; otherwise, prompt them to log in. My approach involves leveraging Firebase authentication for this functionality. import Head from "next/head"; import { auth } from "../../comp ...

javascriptreactjsfirebasenext.jsfirebase-authentication

Retrieve the JSON data embedded within the HTML source code and utilize its contents

I stumbled upon a URL like http://example.com. Taking a look at the HTML source, it appears as follows: <html> test test2 {"customer":{"email":null,"is_eu":true"} t </html> My goal is to extract the JSON data from this source and then manipul ...

phphtmljson