Borde alrededor del 100% de la altura y el ancho del cuerpo (HTML 4.01 estricto)

Bien, esto me está volviendo loco ahora mismo.Borde alrededor del 100% de la altura y el ancho del cuerpo (HTML 4.01 estricto)

Quiero tener un borde alrededor de mi documento. Debería estar muy bien recorriendo toda la ventana/ventana gráfica. Así que defino:

body { 
    border: 1px solid red; 
}

Cuando mi documento está en modo peculiar, funciona bien. Al menos en IE, que es mi objetivo principal aquí. Aparece un borde rojo en los bordes de mi página, obviamente porque los CSS predefinidos body y html están configurados para llenar la pantalla.

Cuando va a modo de normas mediante el establecimiento de un DOCTYPE HTML 4.01 estricto, y bodyhtml colapso al tamaño real de (más pequeño) del contenido, la frontera se dibuja a través del centro de la pantalla. Así defino:

body, html { 
    padding: 0px; 
    margin: 0px; 
    border: 0px none; 
    width: 100%; 
    height: 100%; 
} 

body { 
    border: 1px solid red; 
}

Y consigo — barras de desplazamiento, el desplazamiento exactamente un píxel para mostrar los bordes derecho e inferior /. Sin embargo, quiero ese borde visible de inmediato.

¿Existe un método sencillo (como "altura: 99.9%;", "desbordamiento: oculto;" o "cambiar al modo peculiar") para obtener un borde al 100%, sin barras de desplazamiento innecesarias? Solo IE está bien, el navegador cruzado sería mejor, por supuesto.

Fuente

2009-05-20 Tomalak

¿Solo IE para la aplicación de intranet? ¿El único lugar donde puedes obtener el 100% de los usuarios que no son de IE? ¡Loca! :) – Kornel

Los entornos corporativos y Firefox son mutuamente exclusivos. Por lo menos el 99% por ciento del tiempo. Y hasta que Mozilla finalmente lo * consiga * que la autenticación NTLM manual (o jugando con about: config por cliente) realmente no la corte, esto seguirá así. – Tomalak

Configuraciones remotas. http://wetdog.sourceforge.net/ – SpliFF

Como SPLIFF ya se ha mencionado, el problema se debe a que el valor predeterminado (W3C) box model es 'contenido-box' , lo que da como resultado que las fronteras estén fuera del width y height. Pero quieres que estén dentro del 100% de ancho y alto que especificaste. Una solución alternativa es seleccionar el modelo de cuadro de caja de borde, pero no puede hacer eso en IE 6 y 7 sin volver al modo de peculiaridades.

Otra solución también funciona en IE 7. Simplemente establezca html y body en 100% de altura y overflow en hidden para deshacerse de las barras de desplazamiento de la ventana. Luego debe insertar un divisor de envoltura totalmente posicionado que obtenga el borde rojo y todo el contenido, configurando los cuatro box offset properties en 0 (para que el borde se adhiera a los bordes de la ventana gráfica) y overflow a auto (para colocar las barras de desplazamiento dentro del envoltorio div)

Sólo hay un inconveniente: IE 6 no admite la configuración tanto leftyright y ambos top y bottom. La única solución para esto es usar CSS expressions (dentro de un comentario condicional) para establecer explícitamente el ancho y alto de la envoltura a los tamaños de la vista, menos el ancho del borde.

Para que sea más fácil ver el efecto, en el siguiente ejemplo amplié el ancho del borde de 5 píxeles:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
<head> 
    <title>Border around content</title> 
    <style type="text/css"> 
    * { 
     margin: 0; 
     padding: 0; 
    } 

    html, body { 
     height: 100%; 
     overflow: hidden; 
    } 

    #wrapper { 
     position: absolute; 
     overflow: auto; 
     left: 0; 
     right: 0; 
     top: 0; 
     bottom: 0; 
     border: 5px solid red; 
    } 
    </style> 
    <!--[if IE 6]> 
    <style type="text/css"> 
    #wrapper { 
     width: expression((m=document.documentElement.clientWidth-10)+'px'); 
     height: expression((m=document.documentElement.clientHeight-10)+'px'); 
    } 
    </style> 
    <![endif]--> 
</head> 
<body> 
    <div id="wrapper"> 
    <!-- just a large div to get scrollbars --> 
    <div style="width: 9999px; height: 9999px; background: #ddd"></div> 
    </div> 
</body> 
</html>

PS: Acabo de ver que no le gusta overflow: hidden, hmmm .. .

actualización: me las arreglé para conseguir alrededor de usar overflow: hidden falsificando una frontera por medio de cuatro divs que se pegan a los bordes de la ventana (que puede o no sólo Verifica toda la ventana gráfica con un div completo, ya que no se puede acceder a todos los elementos debajo de él). No es una buena solución, pero al menos las barras de desplazamiento normales permanecen en su posición original. No pude lograr que IE 6 simulara el posicionamiento fijo usando expresiones CSS (tuve problemas con los divisores derecho e inferior), pero de todos modos se veía horriblemente ya que esas expresiones son very expensive y la renderización se volvió tediosamente lenta.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
<head> 
    <title>Border around content</title> 
    <style type="text/css"> 
    * { 
     margin: 0; 
     padding: 0; 
    } 

    #border-t, #border-b, #border-l, #border-r { 
     position: fixed; 
     background: red; 
     z-index: 9999; 
    } 

    #border-t { 
     left: 0; 
     right: 0; 
     top: 0; 
     height: 5px; 
    } 

    #border-b { 
     left: 0; 
     right: 0; 
     bottom: 0; 
     height: 5px; 
    } 

    #border-l { 
     left: 0; 
     top: 0; 
     bottom: 0; 
     width: 5px; 
    } 

    #border-r { 
     right: 0; 
     top: 0; 
     bottom: 0; 
     width: 5px; 
    } 
    </style> 
</head> 
<body> 
    <!-- just a large div to get scrollbars --> 
    <div style="width: 9999px; height: 9999px; background: #ddd"></div> 
    <div id="border-t"></div><div id="border-b"></div> 
    <div id="border-l"></div><div id="border-r"></div> 
</body> 
</html>

Fuente

2010-06-29 12:12:29

+1, al menos esa es una explicación decente. Sí, el 'overflow: hidden' es un poco hacky, pero supongo que no hay forma de evitarlo. Parece que mi solicitud original es imposible de cumplir, pero esa también es una respuesta. – Tomalak

PD: ¡Un buen trabajo en su actualización! Daría un segundo +1 si pudiera. :) – Tomalak

@Tomalak: lo hice por ti. ;-) – Chris

Hasta que CSS3 nos brinde bordes internos y el cambio de modelo de caja, necesita dos divs. El primero en dar el 100% de altura y el segundo para proporcionar el borde. De lo contrario, el borde va por fuera del 100% de altura (es decir, 1px + 100% + 1px)

BTW. Debería recopilar algunas estadísticas antes de ir a "solo IE". IE no tiene el market share que alguna vez tuvo. Entre 10 y 30% de tus usuarios pueden estar en otros navegadores.

Fuente

2009-05-20 08:35:17 SpliFF

Es una aplicación de Intranet. Es bastante seguro decir que solo es IE.;-) – Tomalak

Pruebe a establecer bordes para el elemento html. El elemento del cuerpo es tan alto como lo necesita, pero, por lo que recuerdo, el elemento html ocupa todo el espacio (es donde también debe establecer su fondo).

No estoy seguro de cómo se ven las fronteras, generalmente solo establezco fondos.

Fuente

2009-05-20 08:43:06

No funciona, el mismo problema. El elemento HTML también es tan alto/ancho como debe ser cuando el documento está en modo estándar. – Tomalak

borde está fuera del tamaño del 100%. Pruebe padding: -1px o margin: -1px.

Fuente

2009-05-20 08:47:35

margen negativo sacó el borde del documento, el relleno debe ser positivo en la especificación CSS. – SpliFF

Aquí hay una solución simple que usa solo los elementos html y body (sin necesidad de divs anidados). Aprovecha el comportamiento especial del elemento HTML (no puede tener un borde exterior, por lo que debe reducirse para mostrarlo).

<html> 
<head> 
<style> 
html {padding:0; margin:0; border:5px solid red;} 
body {height:100%; padding:0; margin:0; border:0;} 
</style> 
</head> 

<body> 

</body> 
</html>

Fuente

2009-05-20 08:57:17 SpliFF

Agradable. No sabía acerca de las "propiedades especiales" del elemento HTML en este sentido. Bueno saber. – Tomalak

No parece funcionar en modo estándar, sin embargo. La altura html vuelve a colapsar y establecerla en 100% da como resultado una barra de desplazamiento vertical. – Tomalak

Debe estar utilizando Internet Exploiter. Funciona con 4.01 Strict en FF, por lo que probablemente esté viendo un error en el navegador. – SpliFF

Te encantará esta.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 

<style> 
html { 
    height: 100%; 
    width: 100%; 
    display: table; 
} 
body { 
    display: table-row; 
} 
#wrapper { 
    display: table-cell; 
    border: 5px solid red; 
} 
</style> 
</head> 

<body> 
    <div id="wrapper"></div> 
</body> 
</html>

http://www.test.dev.arc.net.au/100-percent-border.html

Pensé que ya tablas mantienen una gran parte del comportamiento "peculiar" incluso bajo las normas de modo que podría ser la solución. Convertir el elemento HTML en una tabla es bastante gracioso.

Antes de marcar esto para no trabajar en IE6, considere que es un problema muy trivial para solucionar.El punto es que el uso del algoritmo de dibujo mesa es la solución, y una solución CSS puro también es posible:

<table class="outer"><tr><td class="inner"> ...page content...

Fuente

2009-05-21 15:29:43 SpliFF

¿La única solución en la página que realmente funciona y se marca abajo? WTF? – SpliFF

Hmm ... ¿adivina porque no funciona en IE6? pero para eso sirve IE7-js. – SpliFF

esto funciona ** hasta cierto punto **. si tiene varios divs posicionados de manera relativa, por cualquier razón, el primer div ocupará la gran mayoría del espacio y los otros div solo ocuparán una porción de la pantalla, en lugar de que cada página ocupe una página entera:/¿por qué? ¡¿¡¿¡¿esta?!?!?! – Anthony

También un poco feo, pero dando al cuerpo

position:relative; 
top:-1px; 
left:-1px;

trabajó para mí.

Fuente

2010-07-29 08:19:21 acme

Eso también vale la pena intentarlo. Y es solo * un poco * feo, no serio. – Tomalak

Borde alrededor del 100% de la altura y el ancho del cuerpo (HTML 4.01 estricto)

Respuesta

Cuestiones relacionadas