html - selectores - ¿Cómo hacer que los divs para niños siempre se ajusten al div principal?
sass parent selector (10)
Mi pregunta es si hay una forma, sin usar JavaScript, de hacer que los divs hijos se extiendan a los bordes de sus padres, sin exceder esos bordes, cuando no se puede saber de antemano el tamaño del div principal.
A continuación se muestra el marcado de muestra / estilos que demuestran mi problema. Si lo carga en un navegador, verá que #two y #three 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 decirles a los niños que ocupen el ancho o la altura que les queda, en lugar de la altura o el ancho completo del elemento principal.
<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>
</html>
Asegúrese de que el div más externo tenga las siguientes propiedades de CSS:
.outer {
/* ... */
height: auto;
overflow: hidden;
/* ... */
}
En su ejemplo, no puede: el 5px margin se agrega al cuadro delimitador de div#two y div#three haciendo que su ancho y alto sea 100% de parent + 5px, que se desbordará.
Puede usar padding en el Elemento padre para asegurarse de que haya 5 5px de espacio dentro de su borde:
<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>
EDITAR: En las pruebas, eliminando el width:100% del div#two lo dejará funcionar correctamente ya que los div son de nivel de bloque y siempre llenará el ancho de sus padres por defecto. Eso debería aclarar su primer caso si desea usar margen.
Hay dos técnicas comúnmente usadas para esto:
- Posicionamiento absoluto
- Estilos de mesa
Dado el HTML que proporcionó aquí, está la solución que usa 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>
<div id="one" class="border">
<div id="two" class="border margin"></div>
<div id="three" class="border margin"></div>
</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í hay 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>
<div id="one">
<div id="two">
<div id="four"></div>
</div>
<div id="three">
<div id="five"></div>
<div id="six"></div>
</div>
</div>
</html>
Para el ancho es fácil, simplemente elimine el width: 100% regla del width: 100% . Por defecto, el div se estirará para ajustarse al contenedor padre.
La altura no es tan simple. Podría hacer algo como el truco de columna de igual altura .
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;}
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.
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 eliminar el ancho: 100% en # dos . Debería 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%;}
Si te he entendido bien, 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; }
Al establecer una dimensión (alto / ancho) y un desbordamiento en automático u oculto en el elemento principal, este hace que contenga cualquier elemento secundario flotante.
Tenga en cuenta que el desbordamiento: oculto; ocasionalmente puede causar problemas con el corte del contenido, en cuyo caso es posible que desee probar este método alternativo:
Tuve un problema similar, pero en mi caso, tengo contenido en mi div que en cuanto a la altura excederá los límites del div principal. Cuando lo haga, quiero que se desplace automáticamente. Pude lograr esto al usar
.vscrolling_container { height: 100%; overflow: auto; }
podrías usar display: inline-block;
espero que sea útil.
podrías usar heredar
#one {width:500px;height:300px;}
#two {width:inherit;height:inherit;}
#three {width:inherit;height:inherit;}