What is the best way to ensure FireFox recognizes the accurate height of my divs?

Check out my code snippet on this fiddle http://jsfiddle.net/9m1Lba6u/

The code works perfectly on Google Chrome and Safari, displaying all numbers from 1 to the last one. However, when viewed in FireFox, it only shows numbers up until 99. Could there be something missing in the stylesheet?

Here is a condensed version of my CSS:


html, body {
  margin: 0;
  padding: 0;
  border: 0;
  height: 100%;
  overflow: hidden;
}
.head {
  width: 100%;
  height: 60px;
  background-color: #CDF1F4;
}
.main-content {
  width: 70%;
  height: 100%;
  padding-bottom: 70px;
  float: right;
  background-color: #BEE4F4;
  overflow: auto;
  box-sizing: border-box;
}
.side-bar {
  width: 30%;
  height: 100%;
  padding-bottom: 70px;
  float: left;
  background-color: #E1BEF4;
  overflow: auto;
  box-sizing: border-box;
}

<div class="head"></div>
<div class="main-content"></div>
<div class="side-bar"></div>

Answer ā„–1

Below is a straightforward CSS2 method (although it requires additional wrappers)

HTML:

<div class="head"></div>
<div class="page">
    <div class="page-inner">
        <div class="main-content">first
            <br>1
            <br>2
            <br>3
            <br>4
            .....
            <br>99
            <br>100
            <br>
            <br>last
        </div>
        <div class="side-bar">first
            <br>1
            <br>2
            <br>3
            <br>4
            .....
            <br>99
            <br>100
            <br>
            <br>last
        </div>
    </div>
</div>

CSS:

html, body {
    margin: 0;
    padding: 0;
    border: 0;
    height: 100%;
}
body:before{
    content:'';
    float:left;
    height: 100%;
}
.head {
    width: 100%;
    height: 60px;
    background-color: #CDF1F4;
}
.page{position:relative;}
.page:after{content:''; display:block; clear:both;}
.page-inner{position:absolute; left:0; right:0; top:0; bottom:0;}
.main-content {
    width: 70%;
    height: 100%;
    float: right;
    background-color: #BEE4F4;
    overflow: auto;
}
.side-bar {
    width: 30%;
    height: 100%;
    float: left;
    background-color: #E1BEF4;
    overflow: auto;
}
.footer {
    width: 100%;
    height: 160px;
    background-color: #F4BED6;
}

Answer ā„–2

update

overflow: auto;

within .content-container and .menu-bar, this solution proved effective for me.

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

Modifying the column layout of a CSS grid using a media query

I am working on creating a responsive grid layout with a specific breakpoint that should reduce the number of columns to 14. Here is the code snippet I have in my Sass file: #app { --mid-col-size: 60px; --mid-col-amount: 12; --edge-col: 150px; --co ...

Preventing text from wrapping in a TypeScript-generated form: Tips and tricks

Iā€™m currently working on a ReactJS project and my objective is simple: I want all three <FormItem> components to be displayed in a single line without wrapping. However, I am facing the following output: https://i.stack.imgur.com/mxiIE.png Within ...

What is the best way to include an arrow in a dropdown menu?

I've been working on restyling a Select box and I want to add a CSS arrow that rotates as the Select box expands. However, I'm struggling to align the arrow properly with the Select box. I've tried using code from the internet, but it hasn&a ...

JavaScript clear when dynamically loading

I am encountering an issue with a javascript plugin I have for a specialized image scroller. This scroller includes various timeout methods and numerous variables with values set based on those timeouts. While everything is working flawlessly, the site I ...

How can I send form data using libcurl in C++ for a particular form?

How can I post and submit form data using libcurl and C++ for the form below? <form id="loginContainer" class="controllerContainer" action="/j_spring_security_check" method="post"> <h2>Login</h2> <hr> <fieldset> <div ...

Arrange components within the form

Just started experimenting with this a few days ago. In my form, there is a text field and a button that I want to align side by side at the center of the form. .row { width: 100%; margin-bottom: 20px; display: flex; flex-wrap: wrap; } .col-6 { ...

Selecting a Default Option in Dropdown Menu: A Step-by-Step Guide

Hey there! I'm facing an issue with setting a default selection on my dropdown due to what seems to be interference from Angular. Below is the code snippet I've been using: <select class="form-control" data-ng-model="timePeriod" data-ng-chang ...

Is it possible for me to include an ::after pseudo-element within a label that contains an input field?

I'm trying to create a clickable effect using CSS only with labels and inputs. However, I am struggling to replicate the same effect on my ::after pseudo-element without moving the input outside of the label. I attempted using flexbox order property b ...

Grid Arrangement Featuring Consistently Sized Images

I am struggling to create a grid layout for posts where the images maintain the same dimensions regardless of their size. I just can't seem to crack it. For example, whether it's a square image or a rectangle image, they should appear in the same ...

Leveraging em units in jQuery Script

I'm currently in the process of building a website and I'm facing an issue with converting measurements to em's. The script that I have reused from a previous project only seems to work with pixels, despite my efforts to make it compatible w ...

Display the Bootstrap dropdown menu on the right-hand side

I am currently working on a dropdown menu and I would like the dropdown items to be displayed on the right side. The functionality is working, but there seems to be an issue where the dropdown menu is not fully visible. The dropdown menu is located within ...

Hide the paragraph element when the navigation link is being hovered over

Is there a way to hide a <p> element when hovering over a link? My website is built with Drupal and uses the Superfish module for the navigation bar. When I hover over the links, a secondary nav bar drops down. I want the slogan of the website to di ...

Incorporate an ASP table within an ASP table to enhance data organization and presentation

Is it possible to create a dynamic ASP.NET table structure similar to the one demonstrated below by nesting tables inside table cells? <table> <tr> <td>[Image]</td> <td> <table> <tr> ...

What causes the positioning difference between an HTML div element containing a p tag versus one containing an img tag?

While working on a coding project at Codecademy.com, I encountered an interesting issue. I had created several circle containers using <div> tags, which all lined up perfectly in a row when they were empty. However, when I inserted images into some o ...

Set the maximum height of an image to be the same as the height of another row within a

Currently, I am dealing with a grid that consists of two columns and one row. One cell contains an image that can resize dynamically, while the other cell contains two input fields with fixed height. The issue arises when resizing the window, as the height ...

Navigational aids contained within buttons

Styling for Tooltip: .mainButtonContainer button:hover:after { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.7); border-color: #093466; border-radius: 5px 5px 5px 5px; border-style: solid; border-width: 7px 2px 2px; bot ...

What is the method for accessing the z-index property of an element in Selenium using Python?

Is it possible to confirm the depth of web elements by checking the "z-index" attribute? Successfully locating an element can be achieved using one of the two statements below. e = WebDriverWait(tA.driver,1).until(EC.visibility_of_element_located((By.XPA ...

Adjusting the transparency levels of all div backgrounds simultaneously

Is there a way to uniformly add an alpha value to all the divs on my web page without specifying the exact color code in 'rgba'? I have divs with different background colors and I want to easily revert the changes if needed. Perhaps something al ...

Scaling Android layouts for elements specified in dp size is an essential aspect of design

Three FrameLayout's with unique background colors are arranged to create a colorful stripe. Each FrameLayout is sized in dp. [ The stripe is too long for the screen. How can we scale the stripe while maintaining aspect ratio and without changing the ...

Manipulate the content of any webpage without using external extensions by injecting your own HTML, CSS, and JavaScript code

I am currently following a tutorial on how to draw shapes on a local webpage using Canvas. I came across this helpful article on Html5 canvas paint. Everything is going smoothly, but now I am interested in replicating the drawing functions/CSS/HTML and "i ...