html，正文：100% 不工作答案

【问题标题】：html, body: 100% not workinghtml，正文：100% 不工作
【发布时间】：2015-05-15 11:41:58
【问题描述】：

我有一个结构简单的页面，有很多 div 重复相同的内容（文本和两个图像），我需要这个来打印仅在 Firefox 中不重复的图像，这是一个示例：

<!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>

我试图把高度：100%；并且 min-height 对 body 和 html, 来说也是 100%，在 div 容器中也是如此，但仍然无法正常工作。

谢谢！

【问题讨论】：

你能发布一个小提琴样本来调查吗？？以便人们可以提供帮助！
好主意，在这里：
jsfiddle.net/7x32pna7
你试过给#content {float: left}这应该可以解决问题

标签： html css firefox printing height

【解决方案1】：

你试试这个。

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

参考这个网址： Make body have 100% of the browser height

【讨论】：

谢谢，但还是不行，我之前试过了，看了参考，不知道为什么不行。
事情是我在@mediaprint 尝试这个，但我也在它之外做了它，它在 chrome 中不起作用，即，Opera 也一样。

【解决方案2】：

我更新了你的小提琴：你必须从 html 和 body 中删除 height: 100% 并像这样使用它：

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

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

希望对你有帮助

【讨论】：

【解决方案3】：

试试：

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

【讨论】：

为什么 OP 应该“试试这个”？请添加对您所做的事情以及您这样做的原因的解释，不仅是为了 OP，也是为了 SO 的未来访问者。
对不起，我不明白你的评论。 OP 和 SO 是什么意思？谢谢。
我必须在 Firefox 中打印这个 Html，问题是我 Firefox 只显示一页的图像，我认为这是因为内容和正文的高度只能达到 700px或多或少，我不确定，认为是这样，或者它是 Firefox 错误打印。
在 Chrome 和 Opera 中有效，我真的不知道为什么，在 Firefox 中不能避免分页符，所以我必须在 @mediaprint 中添加边距以进行“手动打印” "，不是正确的，但我还没有找到其他选择。