padding-top does not affect Chrome
css, firefox, google-chrome, height, html
Solution
If you want a quick workaround, try this
#tecnologia {
display: table;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding-top: 4em;
height: 100%;
background-color:#68a4dc;
background-image: url('/images/fondo_azul.jpg');
color:#ffffff;
}
I tested it in Chrome and Firefox and it seemed to fix the issue. The real problem here is that you're setting
display: table
for #technologia. Chrome is subtracting the 4em padding from the height automatically, which is redundant when you set the height to 100% - 4em. Firefox, on the other hand, doesn't do this.
Ideally, you shouldn't be using table layouts anyway. Table display implementations across different browsers are terribly uncoordinated, and your reset.css doesn't account for this special case.
Problem
Illustration of the problem as seen in Chrome: The expected behaviour and FF one: We're making a page, Hybrid Orange, but the padding-top seems not to affect the height of the div Tecnología in Chrome. I want the div to be 100% height, so the first px scrolled is the next section. I'm not sure what causes this behaviour to be different in FF and Chrome. Relevant part of the HTML: ``` <nav> <header id = "bar"> [...] </header> <ul> [...] </ul> </nav> <div id = "inicio"> [...] </div> <div id = "tecnologia"> <div class = "v_center"> <div class="container clearfix"> <div id="tecno-web" class="tecno-div"> [...] </div> </div> </div> </div> ``` Relevant part of the css: ``` nav { position: absolute; top: 60%; z-index: 100; width: 80%; height: 4em; padding: 0 10%; /* Bug of android's browser: http://stackoverflow.com/q/19254146/938236 */ -webkit-backface-visibility: hidden; background-color: #FFF; box-shadow: 0 2px 8px -1px gray } #tecnologia { display: table; position: relative; width: 100%; padding-top: 4em; /* height of this section is 100% (-4em is to compensate the padding-top) */ height: calc(100% - 4em); background-color:#68a4dc; background-image: url('/images/fondo_azul.jpg'); color:#ffffff; } ``` The expected behaviour is this: tecnologia height is 100%, which comes from its actual height (100% - 4em) + the height of the padding-top. However, in Chrome this padding top seems not to increase the Tecnología section. It behaves as expected in Firefox. If I set `height: 100%;` it works in Chrome, but breaks in Firefox (too long), as expected from the height + the padding.