El div interno excede los límites div externos

No puedo obtener el div interno (con Hello World) para caber dentro del div "box" en este ejemplo de código (también en http://www.toad-software.com/test.html).El div interno excede los límites div externos

A pesar de que el cuerpo está configurado al 100%, ¡el div interno no estará contenido! Este es un caso de prueba para un proyecto más grande en el que una tabla de ancho variable excede los límites de su contenedor. La tabla estaría en el div interno y el contenedor sería la "caja".

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <style type="text/css"> 
     /*html { width: 100%; height: 100%; position: relative; background: #c0c0c0; } 
     body { position: absolute; width: 100%; height: 100%; background: #f9f9f9; }*/ 

     body, 
     html 
     { 
      margin: 0; 
      padding: 0; 
     } 

     body 
     { 
      width: 100%; 
     } 

     div.box 
     { 
      padding: 10px; 
      background: #ff33ff; 
     } 

    </style> 
</head> 
<body> 
    <div class="box"> 
     <div style="width: 1500px; height: 900px; background: #f12;">Hello World</div> 
    </div> 
</body> 
</html>

Fuente

2008-11-03 Caveatrob

¿El objetivo es hacer crecer el div que contiene o reducir el div contenido? –

El ancho del 100% en el elemento del cuerpo está en relación con el puerto de vista, que es por eso que estás color de fondo es de corte cuando se desplaza. O bien establecer un ancho de su cuerpo en 1520px a encompase el div contenida o añadir otra div y hacer lo siguiente:

div.box { width: 100px; overflow: auto; }

Sin embargo, como una palabra de advertencia, dirigiéndose por el camino de desplazamiento horizontal es una mala idea para un primer proyecto en css y en la experiencia del usuario.

Fuente

2008-11-04 03:39:28

añadir overflow:hidden; al contenedor <div>

Fuente

2008-11-03 20:09:44 Javier

+1: Gracias, hombre. Me ayudó a salir de un aprieto. –

El div interno excede los límites div externos

Respuesta

Cuestiones relacionadas