cómo hacer que los divs para niños siempre encajen dentro de div para padres?

Mi pregunta es si hay una forma, sin usar javascript, de provocar que los elementos secundarios para niños se extiendan a los bordes de sus elementos primarios, sin exceder esos bordes, cuando no se puede saber de antemano el tamaño del elemento primario padre.cómo hacer que los divs para niños siempre encajen dentro de div para padres?

A continuación se muestran ejemplos de marcado/estilos que demuestran mi problema. Si lo carga en el navegador, verá que #two y #three se extienden fuera de su elemento principal, #one, y hacen que aparezcan las barras de desplazamiento.

Mi problema no es tanto las barras de desplazamiento, sino que no sé cómo decirle a los elementos secundarios que ocupen el ancho o alto que les queda, en lugar de la altura o el ancho completo del elemento primario.

<html> 
<head> 
<style> 
html, body {width:100%;height:100%;margin:0;padding:0;} 
.border {border:1px solid black;} 
.margin { margin:5px;} 
#one {width:100%;height:100%;} 
#two {width:100%;height:50px;} 
#three {width:100px;height:100%;} 
</style> 
</head> 
<body> 
    <div id="one" class="border"> 
     <div id="two" class="border margin"></div> 
     <div id="three" class="border margin"></div> 
    </div> 
</body>

Fuente

2009-07-08 Tim Sheiner

podría utilizar heredar

#one {width:500px;height:300px;} 
#two {width:inherit;height:inherit;} 
#three {width:inherit;height:inherit;}

Fuente

2009-07-08 14:01:03 Silfverstrom

No creo que las obras. Bueno, al menos si esos son los únicos cambios que haces. – thebrokencube

No pude observar ningún cambio con respecto al original al usar estos estilos. –

En su ejemplo, no se puede: se añade el 5px margin al cuadro delimitador de div#two y div#three hacer efectiva su anchura y altura 100 % de parent + 5px, que se desbordará.

Puede utilizar padding en el elemento primario para asegurar que hay 5px de espacio dentro de su frontera:

<style> 
    html, body {width:100%;height:100%;margin:0;padding:0;} 
    .border {border:1px solid black;} 
    #one {padding:5px;width:500px;height:300px;} 
    #two {width:100%;height:50px;} 
    #three {width:100px;height:100%;} 
</style>

EDIT: En las pruebas, la eliminación de la width:100% de div#two realmente dejarlo trabajar correctamente como div s son bloques -level y siempre llenará el ancho de sus padres por defecto. Eso debería aclarar su primer caso si desea usar margen.

Fuente

2009-07-08 14:06:43 ajm

O bien, adhiérete a los porcentajes: usar un margen porcentual y un porcentaje de ancho/alto también funcionará, ya que trabajas con las mismas "unidades". Sin embargo, esa altura del 100% te va a atrapar, ya que hay otro niño allí que usa una parte de la altura de los padres. – ajm

Eso no funciona, la altura: 100% en #three siempre desbordará el contenedor principal. –

Sí, como dije en mi comentario, la altura del 100% se desbordará siempre. Algo así como un margen del 2% en # dos y # tres, una altura del 10% en # dos y una altura del 82% en # tres podría hacer el truco. – ajm

Si lo he entendido correctamente, el método más fácil es hacer flotar a los niños. Por ejemplo:

#one { width: 500px; height: 1%; overflow: hidden; background: red; } 
#two { float: left; width: 250px; height: 400px; background: aqua; } 
#two { float: left; width: 250px; height: 200px; background: lime; }

Configuración de una dimensión (altura/anchura) y el desbordamiento de auto u oculta en el elemento padre hace que se contener cualquier elemento secundario flotaban.

Tenga en cuenta que overflow: hidden; en ocasiones puede causar problemas con el contenido queden cortadas, en cuyo caso es posible que desee probar este método alternativo:

http://www.positioniseverything.net/easyclearing.html

Fuente

2009-07-08 14:08:27

Esto lo obliga a establecer la altura de los elementos contenidos en lugar de establecer la altura del contenedor y hacer que los elementos contenidos se estiren para ajustarse. –

Este tipo de trabajo, pero trunca la parte inferior del elemento secundario, no hace que el elemento encaja dentro del elemento primario –

Para el ancho es fácil, basta con quitar la regla width: 100%. De manera predeterminada, el div se estirará para ajustarse al contenedor primario.

La altura no es tan simple. Podría hacer algo como equal height column trick.

html, body {width:100%;height:100%;margin:0;padding:0;} 
.border {border:1px solid black;} 
.margin { margin:5px;} 
#one {width:500px;height:300px; overflow: hidden;} 
#two {height:50px;} 
#three {width:100px; padding-bottom: 30000px; margin-bottom: -30000px;}

Fuente

2009-07-08 14:10:56

Éste también trunca el segmento secundario largo, pero no lo acorta para que quepa dentro del elemento primario con el margen deseado en la parte inferior. –

Para el cierre, creo que la respuesta a esta pregunta es que no hay solución. La única forma de obtener el comportamiento que quiero es con javascript.

Fuente

2009-07-16 19:55:59

Ver mi respuesta. De hecho, proporciono dos formas diferentes de hacerlo. – Ryan

A menudo, las tablas pueden hacer fácilmente lo que los divs requieren saltar en el aro para lograrlo. Desafortunadamente, los divs se metieron en CSS muy mal pensado. – fyngyrz

Si desea que los divs secundarios se ajusten al tamaño principal, debe poner un margen al menos del tamaño de los bordes secundarios en los divs secundarios (child.margin >= child.bordersize).

Para este ejemplo, simplemente elimine el ancho : 100%; y la altura : 100% en #una y elimine la anchura : 100% en #two. Debe ser algo como esto:

html, body {width:100%; height:100%; margin:0; padding:0;}  
.border {border:1px solid black;} 
.margin {margin:5px;} 
\#one {} 
\#two {height:50px;}  
\#three {width:100px; height:100%;}

Fuente

2011-02-11 20:13:17 Wade

que tenía un problema similar, pero en mi caso, tener un contenido en mi div que respecto a la altura excederá los límites de la div padre. Cuando lo haga, quiero que se desplace automáticamente. Pude lograr esto usando

.vscrolling_container { height: 100%; overflow: auto; }

Fuente

2011-04-11 22:18:33 meem

El último atempt sería bueno. Pero si y tratar de insertar texto y va a ver que el texto superará las fronteras

Fuente

2013-02-11 16:39:46 ABA

Solo publique una respuesta si responde la pregunta original. Si solo quieres comentar algo de una respuesta o pregunta, agrega un comentario. –

podría utilizar display: inline-block;

espero que sea útil.

Fuente

2013-10-28 09:48:09

Hay dos técnicas comúnmente utilizadas para este:

Posicionamiento absoluto
estilos de tabla

Dado el HTML que ya ha proporcionado aquí es la solución utilizando posicionamiento absoluto:

body #one { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    width: auto; 
 
    height: auto; 
 
} 
 
body #two { 
 
    width: auto; 
 
} 
 
body #three { 
 
    position: absolute; 
 
    top: 60px; 
 
    bottom: 0; 
 
    height: auto; 
 
}

<html> 
 
<head> 
 
<style> 
 
html, body {width:100%;height:100%;margin:0;padding:0;} 
 
.border {border:1px solid black;} 
 
.margin { margin:5px;} 
 
#one {width:100%;height:100%;} 
 
#two {width:100%;height:50px;} 
 
#three {width:100px;height:100%;} 
 
</style> 
 
</head> 
 
<body> 
 
\t <div id="one" class="border"> 
 
\t \t <div id="two" class="border margin"></div> 
 
\t \t <div id="three" class="border margin"></div> 
 
\t </div> 
 
</body

Siempre puede usar los elementos table, tr y td directamente a pesar de las críticas comunes ya que hará el trabajo. Si prefiere usar CSS, no existe un equivalente para colspan, por lo que es probable que termine con tablas anidadas. Aquí está un ejemplo:

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 
#one { 
 
    box-sizing: border-box; 
 
    display: table; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    border: 1px solid black; 
 
} 
 
#two { 
 
    box-sizing: border-box; 
 
    display: table; 
 
    height: 50px; 
 
    padding: 5px; 
 
    width: 100%; 
 
} 
 
#three { 
 
    box-sizing: border-box; 
 
    display: table; 
 
    height: 100%; 
 
    padding-bottom: 60px; 
 
    padding-left: 5px; 
 
    
 
} 
 
#four { 
 
    display: table-cell; 
 
    border: 1px solid black; 
 
} 
 
#five { 
 
    display: table-cell; 
 
    width: 100px; 
 
    border: 1px solid black; 
 
} 
 
#six { 
 
    display: table-cell; 
 
}

<html> 
 
\t <div id="one"> 
 
\t  <div id="two"> 
 
      <div id="four"></div> 
 
     </div> 
 
     <div id="three"> 
 
      <div id="five"></div> 
 
      <div id="six"></div> 
 
     </div> 
 
\t </div> 
 
    </html>

Fuente

2016-09-14 17:07:38 Ryan

Asegúrese de que el div exterior tiene las siguientes propiedades CSS:

.outer { 
    /* ... */ 
    height: auto; 
    overflow: hidden; 
    /* ... */ 
}

Fuente

2017-07-10 01:41:44

cómo hacer que los divs para niños siempre encajen dentro de div para padres?

Respuesta

Cuestiones relacionadas