html - formulario - ¿No se puede evitar que las Div anidadas se desborden al usar porcentajes de porcentaje y relleno en CSS?
estructura de un formulario html (1)
Quiero que sea tal que, los niños tienen un ancho y una altura del 100% del espacio restante después de calcular el relleno, no antes.
La brillante manera futurista de hacer eso es:
#something {
width: 100%; height: 100%; padding: 10px;
box-sizing: border-box; -moz-box-sizing: border-boz; -webkit-box-sizing: border-box;
}
Sin embargo, esto no funcionará en IE antes de la versión 8.
¿Debo recurrir a la posición: absoluta e izquierda / derecha / arriba / abajo?
Esa es otra forma, pero el ''posicionamiento del borde'' (posicionamiento en la top e bottom pero no en height , y de forma similar para left / right / width ) no funcionará en IE antes de la versión 7.
las barras de desplazamiento no son el problema principal, el hecho de que el niño se extiende más allá del ancho del contenedor principal.
Horizontalmente no es un problema. Deje el width predeterminado en auto y recibirá el ancho completo de su elemento primario menos los rellenos. El único problema es que no obtienes ese comportamiento con la height .
Un enfoque híbrido: auto - width , 100% altura con box-sizing , y agregue algún truco JS que solo se ejecuta en IE6-7 para arreglar la altura allí?
Quiero poder diseñar divs anidados con estas propiedades:
width: 100%-
height: 100% -
padding: 10px
Quiero que sea tal que, los niños tienen un ancho y una altura del 100% del espacio restante después de calcular el relleno, no antes. De lo contrario, cuando tengo un documento como el siguiente ejemplo, el niño hace que aparezcan las barras de desplazamiento. Pero las barras de desplazamiento no son el problema principal, el hecho de que el niño se extiende más allá del ancho del contenedor principal.
Puedo usar todas las position: absolute declaraciones position: absolute , pero eso no parece correcto. Aquí está el código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<title>Liquid Layout</title>
<style>
body, html {
width:100%;
height:100%;
margin:0;
padding:0;
background-color:black;
}
#container {
position:relative;
width:100%;
height:100%;
background-color:red;
opacity:0.7;
}
#child1 {
position:relative;
width:100%;
height:100%;
padding:10px;
background-color:blue;
}
#nested1 {
position:relative;
background-color: white;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="child1">
<div id="nested1"></div>
</div>
</div>
</body>
</html>
¿Cómo puedo hacerlo así, usando la position:relative o de position:static y los porcentajes, los porcentajes de tamaño de los hijos según el ancho / alto del padre menos el relleno y los márgenes? ¿Debo recurrir a la position:absolute e izquierda / derecha / arriba / abajo?
Gracias por la ayuda, Lance