html, body: 100% not working

Question

I have a page with a simple structure, have a lot of divs repeating same content (text-and two images), i need this to print a image that doesnt repeat in firefox only, heres an example:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<title>Cupones de descuento</title>
</head>

<body>
<div class="content">
<!---------------------------------------CUPON TURISTA--------------------------------------->
    <img src="img/cortesup.png" class="corte" />
    <div class="cupon">
        <div class="logo"><img src="img/logobuzios.png" class="logobuzios" alt="logobuzios" /></div>
            <div class="cont">
                <h3>CUPON N°:</h3>
                <p>Nombre:</p>
                <p>DNI:</p>
                <p class="info">Válido desde DD/MM/AA hasta DD/MM/AA</p>
                    <img src="img/separador.png" class="separador" alt="separador"/>
                <h3>MENÚ TURISTA</h3>
                    <p>VÁLIDO PARA: 1 (UN) ALMUERZO O CENA</p>
                    <p class="turista">Menú Turista: Incluye 1 (un) plato de entrada a elección + Incluye 3 (tres)
                                        opciones de plato principal + Incluye 1 (un) postre a elección.<br />
                                        NO Incluye Bebida. Horario de atención: 12 a 21:30 hs.</p>
                    <img src="img/separadordos.png" class="separador" alt="separador"/>
                <p class="restaurant"><strong>RESTAURANTES ASOCIADOS:</strong> CLUB LA PLAGE - DON JUAN - BAR DO MANGUE - BUZIN - 
                    ENU SUSHI - LA DOLCE VITA - PATIO HAVANA - NOI - PURO SABOR - SAN TELMO - DONA FLOR 
                    MINEIROS GRILL - LORENZO - RINCON - PARVATI.</p>
            </div>
            <div class="pie">
                <p class="asociados">Visite nuestro listado de <strong>Restaurantes Asociados</strong></p>
                    <img src="img/cubiertos.png" class="cubiertos" alt="cubiertos"/>
                <p class="web">www.grupobuziosgourmet.com</p>
            </div>

    </div>

    <!--Datos útiles-->

    <div class="datos">
        <div class="datoshead">
            <p class="datosutiles">DATOS ÚTILES</p>
        </div>

            <p class="utiles">El pasajero titular deberá presentar el o los vouchers impresos en el restaurante que haya seleccionado para consumir.<br />
            <strong>UBICACIÓN DE RESTAURANTES:</strong><br />
            <strong>CENTRO DE BÚZIOS:</strong> DON JUAN - BUZIN - LA DOLCE VITA - ENU SUSHI - PATIO HAVANA - NOI - PARVATI - PURO SABOR - MINEIROS GRILL - LORENZO.<br />
            <strong>JOÃO FERNANDES:</strong>  CLUB LA PLAGE - DONA FLOR.<br />
            <strong>MANGUINHOS:</strong> BAR DO MANGUE (PORTO DA BARRA).<br />
            <strong>ORLA BARDOT:</strong> MATAHARI - RINCON (CENTRO).<br />
            <strong>FERRADURA:</strong> SAN TELMO (SOBRE AV. PRINCIPAL).<br />
            <strong>HORARIO DE ATENCIÓN:</strong><br />
            Todos los restaurantes asociados a Grupo Búzios Resto atienden de 12 a 21.30HS.
            <strong>Excepto Club La Plage (sólo almuerzo con bebida + 1 café o caipirinha de cortesía) de 12 a 16 hs. Dona Flor (sólo cena) de 18 a 21.30 hs.</strong>
            Ante cualquier inconveniente podrá comunicarse de L a V al tel. +5411-5275-0075 y a nuestro servicio de guardia los fines de semana: Cel. Búzios: +0055-22 9227-8174 / +0055-22 99282-2067
            </p>

    </div>

I have tried to put the height: 100%; and min-height too 100% to body and html, , at the div container too, but still not working.

Thanks!

can you post a fiddle sample to look into..?? so that people can help out! — Aru, Mar 13 '15 at 04:08
have you tried giving `#content {float: left}` this should do the trick — Doml The-Bread, Mar 13 '15 at 08:44

score 0 · Answer 1 · edited May 23 '17 at 11:56

0

You just try this.

html{
  height: 100%;
}
body {
  min-height: 100%;
}

Refer this url: Make body have 100% of the browser height

edited May 23 '17 at 11:56

Community

1
1

answered Mar 13 '15 at 04:08

user3129330

11
4

Thank you, but still not working, i tried that before and seen thar reference, i dont know why doesnt works. – Walter Ezequiel Mar 13 '15 at 04:11
The thing is im trying this at @mediaprint, but i did it outside of it too, it doesnt work in chrome, ie, opera either. – Walter Ezequiel Mar 13 '15 at 04:13

score 0 · Answer 2 · answered Mar 13 '15 at 08:47

0

i updated your fiddle: you gotta remove the height: 100% from html and body and use it like this:

body {float: left;}
#content {float: left;}

https://jsfiddle.net/7x32pna7/1/

hope that helps

answered Mar 13 '15 at 08:47

Doml The-Bread

1,761
1
11
17

score 0 · Answer 3 · answered Mar 13 '15 at 08:54

0

Try:

body {float: left;
margin: 0px;
height: 100%;
width: 100%;
}

answered Mar 13 '15 at 08:54

Lombarda Arda

268
2
12

Why should the OP "try this"? Please add an explanation of what you did and why you did it that way not only for the OP but for future visitors to SO. – Jay Blanchard Mar 13 '15 at 14:36
Im sorry i don´t understand your comment. What do you mean with OP an SO?. Thanks. – Walter Ezequiel Mar 13 '15 at 14:53
I got to print this Html in Firefox, and the thing is that i Firefox displays the image i one page only, i think that´s because, the height of the content and body only gets to 700px more or less, i dont know for sure, think got to be that, or it´s a firefox bug printing. – Walter Ezequiel Mar 13 '15 at 14:57
In Chrome and Opera it´s works, i don´t know really why, in Firefox doesnt works the page-break avoid, so i got to put margins in @mediaprint to do a "manually print", not the right thing but i havent found other options. – Walter Ezequiel Mar 13 '15 at 14:59

html, body: 100% not working

3 Answers3