CODEWITHSUNDEEP
cssheight
fluxus
fluxus

Reputation: 559

100% height section work in Firefox, IE, but not in Chrome

I am using a simple layout with three 100% width and height sections. They work as intended in Firefox and IE, but not in Chrome.

Here is the code that I use:

html,body{width: 100%;height: 100%;}
section{width: 100%;height: 100%;}
.section-bg{width: 100%;height: 100%;}

.section-bg is a div that should hold the content. Here is the link to live example if anyone is interested.

Also, I forgot to mention that by inspecting with chrome tools, it seems that the height of auto is applied to the html element. Of course setting this to 100% , makes everything fine in Chrome.

Upvotes: 1

Views: 4921

Answers (2)

RedJabber
RedJabber

Reputation: 121

That is registered Chrome bug. My workaround is to use flexbox next way:

body{
  display: flex;
  flex-direction: column;
}
section {
  flex:1 0 0px;
}

and worckaround for webkit:

@media all and (-webkit-min-device-pixel-ratio:0) { /* ...write webkit styles here*/ }

Upvotes: 1

Paulo Roberto Rosa
Paulo Roberto Rosa

Reputation: 3295

You said that chrome is overriding your CSS right?

So use:

html,body{
  width: 100% !important;
  height: 100% !important;
}
section{
  width: 100% !important;
  height: 100% !important;
}
.section-bg{
  width: 100% !important;
  height: 100% !important;
}

To make sure that browsers will not override your CSS.

Upvotes: 1

Related Questions