html - que - ¿Por qué el atributo min-width de CSS no obliga a un div a tener el ancho mínimo especificado?
min-width responsive (6)
Usted le está diciendo que el ancho mínimo es del 50%. Como no hay nada más ocupando el espacio, lo tomará todo (excepto los márgenes).
Si le das un ancho máximo de, digamos, el 75%, Firefox debería restringirlo a eso. IE6 aún lo ignorará.
Como ya dijo David Kolar, muchos de nosotros normalmente no usamos porcentajes para el ancho mínimo.
<html>
<head>
<style type="text/css">
div {
border:1px solid #000;
min-width: 50%;
}
</style>
</head>
<body>
<div>This is some text. </div>
</body>
</html>
Creo que el div debe ser el 50 por ciento de la página, a menos que, por alguna razón, el texto dentro del div lo haga más grande. Sin embargo, el borde alrededor del div se extiende por todo el ancho de la página. Esto ocurre tanto en IE como en Firefox.
Sugerencias?
Creo que el div debe ser el 50 por ciento de la página, a menos que, por alguna razón, el texto dentro del div lo haga más grande.
min-width no establece un ancho de inicio mínimo a partir del cual crecerá su bloque; más bien limita cuánto puede encogerse el bloque.
En min-width: 50%; , el 50% se refiere al bloque contenedor. Nunca he usado porcentajes con min-width , pero creo que puede ser útil con otras unidades. Por ejemplo, si tengo un bloque (como una columna de texto) que quiero que sea de ancho completo, pero nunca quiero que vaya por debajo del ancho mínimo, podría usar algo como {width: 100%; min-width: 250px;} {width: 100%; min-width: 250px;} .
Tenga en cuenta las advertencias sobre el soporte de IE mencionado por otros.
Es posible que desee probar una hoja de estilo específica de IE e incluir expresiones como:
print("width:expression(document.body.clientWidth < 1024? "50%" : "100%");");
Esto cambiará la configuración del ancho en función del ancho de la ventana del navegador en el momento de la carga. Personalmente, me gusta usar px como medida de la unidad, pero debes probarlo con tu configuración específica.
Sin min-width , su div ocupará todo el ancho de página, así es como se display:block elementos de display:block . Agregar min-width no puede hacerlo más pequeño.
Cambiar la propiedad de display propiedad absolute o float a la left hará que el elemento se contraiga para ajustarse a los contenidos. Entonces, el min-width comienza a tener sentido.
Si proporciona absolute posicionamiento absolute para el elemento, será del 50% en Firefox. Sin embargo, IE no le gusta los atributos min-width o min-height , por lo que tendrá que definir el ancho como 50% también para que funcione en IE.
Para agregar a lo que dijo Chris Serra , en IE <7 (y en 7? No puedo seguir estos días, pero definitivamente <8), el width comporta exactamente como se supone que se comporta el min-width .