Placing a div with 100% height inside a table-cell div in Firefox and IE

Seeking guidance on placing a div with 100% height inside a table-cell div. Attempted giving

display:inline-block; width:100%;height:100%;
to the div, successful in Chrome but facing issues in Mozilla and IE.

Fiddle link: http://jsfiddle.net/kQM74/2/

HTML code:

<div class="container">
    <div class="header width100p">
        <h2>Header</h2>
    </div>
    <div class="content width100p">
        <div class="width25p npv">
            <div class="width100p inner">
                <p>navigation</p>
                <p>
                   Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                </p>
            </div>  
        </div>
      ...

Respective styles:

<style>
*,html{
    margin: 0;
    padding: 0;
}
...

Inquiries about successfully positioning a div (.inner) with 100% height inside a table-cell div (.npv). Works well in Chrome but not in IE and Mozilla. Reasons for failure across browsers are unclear. Is there an alternate CSS method to achieve the same result? If yes, how?

Answer №1

When working with table-cell elements, it is important to nest them inside table-row elements, which should then be wrapped within a table element.

According to the specifications mentioned here, if any of these elements are missing, the browser will automatically insert anonymous elements with the necessary display type. This seems to be where Firefox encounters issues.

To address this problem, ensure that all elements have parent containers with the appropriate display type - there may be instances where table-row elements are not present.

UPDATE: It is recommended to add height:100% for table-cell elements to correct any misbehavior in Firefox 24.0.

.npv, .rtb{
    display: table-cell; 
    -dt-display: table-cell;
    height:100%;
}

View live demonstration here: http://jsfiddle.net/keaukraine/BtwTh/

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

Safari 5 experiences delays with JQuery and CSS3 animations

Encountering issues with jQuery animations specifically in Safari 5 on my Windows system. Struggling with a simple image fade slider that still has some flickering. The slider involves click events moving two pages at once, one active page right and the o ...

Incorporating AngularJS to show sections of a webpage in real-time

, I am working on an angular js application in which I'm using rest services to retrieve http response data. My goal is to display different parts of the webpage conditionally based on the response data. For example, if the data in angular indicates " ...

Positioning items to align an image in the center with both left and right elements

There's a simple question I have for all you HTML and CSS experts out there. I'm attempting to center align a list next to an image, but I can't seem to figure out how to position the list to the left or right of the image. This is what my ...

Launching a ThreadLocal driver for Firefox in Selenium 3 using Java

I recently upgraded to Selenium 3.0.0-beta3 and am attempting to run tests in Firefox 45. After downloading version 10 of geckodriver.exe and adding it to my PATH environment variables, I am setting the system property in the code for geckodriver as I do ...

Assign the appropriate label to the HTML checkbox based on the value obtained from the function

I have managed to successfully initiate the HTML service and display the checkbox itself. However, I am facing a challenge in displaying text next to the checkbox as a label. My goal is to have this label text be the return value of a function in the .gs f ...

Require presenting only four lists - slideDown in jQuery

I am trying to display only 4 out of 8 lists initially, and upon clicking a "more" button, the rest of the list should be revealed. Can someone please assist me with this? Below is the jQuery code: $(document).ready(function() { $("#accordion").hide(); ...

Do not use Express.js to serve the index.html file

Encountered an issue when attempting to run my Express.js solution. Instead of opening my desired index.html file located in the client directory, it kept opening the index.jade file from the views folder with the message "Welcome to Express" on the browse ...

I am unable to get the Javascript code `window.print()` to function

I tried creating a basic link to print a page on my website using Google Chrome, but for some reason, the link is not working. Upon checking my console log, I noticed an error message that says: Maximum call stack size exceeded Here is the HTML code I us ...

Concealing an Automatically Updated Section when Devoid of Content -- Ruby on Rails Version 4

I have come across various solutions to this problem, but none of them seem to be effective for my specific project. In my application, the user's previous choices are displayed in multiple divs. Initially, all the divs are empty. As the user progress ...

error in jquery when splitting

I encountered an issue while trying to split data for checkboxes. var ukuran = data['model'].ukuran_model; var cek = ukuran.split(",").join('], [value='), $inputs = $('input[name^=ukuran]'); $inputs.filter('[value=&a ...

`After the initial instance, the menu title will be altered.`

I have a responsive menu using Bootstrap. When the menu is collapsed, I want it to display the name of the page, and when it is open, I want it to show "Menu." Currently, I have named it "Watch the Trailer" (so let's assume that we are on that page). ...

How can you use a jQuery Selector to target all images and sources within dynamic containers?

I am currently attempting to identify all images and their paths (srcs) within the dynamic containers. The dynamic containers refer to container patterns stored in an array, which is filled dynamically. For example: var containers = new Array( ...

Can you guide me on where to find the login with Facebook button on this site?

I am currently working on integrating a Facebook authentication system into my app, but I find the default log in button provided by Facebook developers section to be quite unappealing. My Question: I am curious about how websites like Stack Overflow man ...

Developing a transparent "cutout" within a colored container using CSS in React Native (Layout design for a QR code scanner)

I'm currently utilizing react-native-camera for QR scanning, which is functioning properly. However, I want to implement a white screen with opacity above the camera, with a blank square in the middle to indicate where the user should scan the QR code ...

Guide to showing an HTML string retrieved from MongoDB with the help of Express

I need help with displaying or rendering an HTML string retrieved from the database. Any assistance would be greatly appreciated. Below is the controller function responsible for rendering the data: exports.previewPageView = (req, res, next) => { / ...

"Make sure to specify Safari input field as an email and mark

I am experiencing an issue with a contact form in my HTML/PHP code. Everything seems to be working fine, but when using the SAFARI browser, the form fails to validate if I try to submit without filling out all input fields. For example, my form includes: ...

Hide the navigation menu when a page link is selected

Within my Angular 8 application, a fixed navigation bar is positioned at the top of the screen. Upon hovering over a dropdown nav link, a menu will appear for the user to explore. However, when a user clicks on one of these menu links, Angular Routing is ...

Arranging images and text side by side with varying breakpoints using Bootstrap classes

In my layout, I have an image and text side by side, with the image appearing first and the text to its left. My goal is to display the text above the image when the screen size is reduced to a small breakpoint, and then switch back to the original layou ...

Enhancing your website with HTML5 Audio Player's Next and Previous functionalities

I've successfully created a playlist that is working, but I'm struggling to make the Next and Previous Buttons actually move forwards and backwards in the playlist. It seems like using the playNext function when next is clicked might work, but I ...

Utilizing the data sent to a modal to enhance the functionality of the code by combining it with the src attribute of an <embed> element

I am trying to pass a dynamic string of data to a Bootstrap modal using the data-val attribute in an HTML table. <td <button type="button" class="btn btn-success btn-xs" data-val="<?php echo $row['order_id']; ?&g ...