CODEWITHSUNDEEP
htmlcssgoogle-chromefirefox
Karthik T
Karthik T

Reputation: 31952

Trouble setting a height to a display:table element in firefox, works in chrome

What I am trying to do: Set the <body> tag as display:table and my header/content/footer as display:table-rows. I also want <body> to be the size of the screen, the child elements will show scrollbar if needed.

I do this by setting 

body{
  display:table;
  height:100%
}

This works in chrome, but in firefox the height of the body is the height of the screen. Is this as expected or is this a firefox issue? Is there a way to achieve this while using table? It used to work without table, but I need the footer to not appear on occasion, so I need my content to grow as needed, and it seems to work nicely in chrome.

You can see this on my (alpha) site at sportmenow.com

Upvotes: 3

Views: 1337

Answers (4)

Montri M
Montri M

Reputation: 1766

Following this bug report, https://bugzilla.mozilla.org/show_bug.cgi?id=26617#c14, it seems when the element is using display: table-row, Firefox treat height as min-height, that's why you only found problem in Firefox.

On the other hand, if you already know the height of your header / footer before hand, you could use position: fixed with fix value in top and bottom attribute to layout your page instead.

In short, please try replace your CSS on your .body and .footer like this.

.body { 
    display: block; 
    position: fixed; 
    width: 100%;
    top: 60px; 
    bottom: 92px; 
    padding: 6px;
}
.footer {
    display: block;
    position: fixed;
    height: 70px;
    width: 100%;
    bottom: 0;
    text-align: center;
    border: 1px solid #CCCCCC;
    background: #FFFFFF;   
}

This will work consistently on both Firefox and Chrome.

However, when you hide your footer, you will need to use javascript to update CSS attribute "bottom" to 0 on your .body element.

$('.body').css({'bottom':'0'});

Upvotes: 1

SW4
SW4

Reputation: 71150

I've provided two solutions below, the first is more structured, the second follows your design pattern.

Demo Fiddle

Why not implement more structured HTML which follows a more semantically correct pattern and structure of table->row->cell:

<header>
    <section></section>
</header>
<article>
    <section></section>
</article>
<footer>
    <section></section>
</footer>

CSS:

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
body {
    display:table;
}
header, footer, article {
    display:table-row;
    width:100%;
    height:100%;
}
header, footer {
    height:50px;
    background:black;
}
section {
    display:table-cell;
    width:100%;
}
section:nth-child(2) {
    height:100%;
}

However.. If you dont care about this so much, you can simply use display:table on your body element and then the below- the limitation being that each section will collapse unless it has content (even only nbsp;)

Demo Fiddle

HTML

<header>headerContent</header>
<article>mainContent</article>
<footer>footerContent</footer>

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
body {
    display:table;
}
header, footer, article {
    display:table-row;
    width:100%;
    height:100%;
}
header, footer {
    height:50px;
    background:black;
}

Upvotes: 3

csuwldcat
csuwldcat

Reputation: 8249

To set any element to 100% of its parent's height, the parent element must have a defined, non-percentage height (px, em, etc.), or it an all ancestor elements must be 100% height. For example, if your element was the first child of the body, you could set it to 100% height with the following CSS:

html, body, #my_element {
  height: 100%;
}

If you were to set a parent to a specific height, then the target element to 100%, the target element would be that height as well. Imagine you had an element with an ID of element_parent, that contained your target element:

#element_parent {
  height: 500px;
}

#my_element {
  height: 100%;
}

In the above example would mean that my_element would expand to the full 500px that its parent is set to.

Upvotes: 1

Jeremy
Jeremy

Reputation: 2709

You can specify the height of a display:table element in firefox. However, to use the full browser window, you may have to specify the height of the html element too:

html { height:100%; }

fiddle

Upvotes: 2

Related Questions