tamaño que pantalla fijo div dinamico contenido cambiar ancho altura ajustar html css

html - pantalla - max-width que es



diseño css ancho fijo y ancho variable en la misma línea (5)

Esta herramienta ayuda a generar columnas fijas líquidas fácilmente.

con las tablas puedo tener fácilmente una fila con 2 columnas, la columna 1 tiene un ancho variable y la columna 2 tiene un ancho fijo en píxeles y la columna 1 cambia de tamaño para llenar el espacio disponible. Estoy haciendo la transición a css y me pregunto cómo hacerlo con css ... y asegúrate de que ambas divs / columnas permanezcan en la misma línea y no se ajusten.


Los flotadores con anchos explícitos son prácticamente la forma estándar de lograr esto hoy en día (debido a la limitada disposición del diseño en CSS1 / CSS2), también puede usar el bloque en línea, pero simplemente terminará siendo más trabajo. No se olvide de contener los flotantes en el padre con desbordamiento: oculto y una propiedad que activa hasLayout como ancho.


Supongo que lo que necesita aquí es un diseño de página de 2 columnas. En teoría, podría usar display: table pero si necesita admitir cualquier versión de IE, esa no es realmente una opción.

Esta es una de las cosas más difíciles que hemos encontrado al cambiar de tablas a CSS, pero afortunadamente para usted, hemos estado haciendo esto durante más de 5 años y creo que puede encontrar una solución para cada problema. Tal vez usted quiera revisar este artículo clásico: Columnas de Faux

Por favor, no se desanime, CSS solo es difícil los primeros meses, y después de eso podrá diseñar cualquier cosa de una manera muy limpia, simple, semántica y estándar.


HTML

<div class="wrapper"> <div class="fixed">fixed</div> <div class="variable">variable</div> </div>

CSS

.wrapper { display: flex; align-items: stretch; flex-flow: row nowrap; justify-content: space-between; } .fixed { min-width: 200px; width: 200px; } .variable { width: 100%; }

Verifique el soporte del navegador aquí.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> html, body, div { margin: 0; padding: 0; border: 0 none; } #left { margin-right: 300px; background: yellow; } #right { width: 300px; float: right; background: #ccc; } </style> </head> <body> <div id="wrapper"> <div id="right">Fixed</div> <div id="left">Variable</div> </div> </body> </html>

Esto tiene una columna derecha de 300 píxeles y una columna izquierda variable. El DOCTYPE está justo ahí para hacer que IE se comporte menos. También se recomienda el uso de un restablecimiento de CSS .