html - guia - Anchura div 100% menos cantidad fija de píxeles
qgis manual (10)
¿Cómo puedo lograr la siguiente estructura sin usar tablas o JavaScript? Los bordes blancos representan los bordes de los divs y no son relevantes para la pregunta.
El tamaño del área en el medio va a variar, pero tendrá valores de píxel exactos y toda la estructura debería escalarse de acuerdo con esos valores. Para simplificarlo, necesitaría una forma de establecer el ancho "100% - n px" en los divs superior-medio y medio-inferior.
Apreciaría una solución limpia para todos los navegadores, pero en caso de que no sea posible, los hacks CSS funcionarán.
Aquí hay una bonificación. Otra estructura con la que he estado luchando y que termina usando tablas o JavaScript. Es ligeramente diferente, pero presenta nuevos problemas. Lo he estado utilizando principalmente en el sistema de ventanas basado en jQuery, pero me gustaría mantener el diseño fuera del script y controlar solo el tamaño de un elemento (el del medio).
¿qué pasaría si su división de envoltura fuera del 100% y usara el relleno para una cantidad de píxeles, entonces si el número de relleno necesita ser dinámico, puede usar jQuery fácilmente para modificar la cantidad de relleno cuando se activen los eventos?
En algunos contextos, puede aprovechar la configuración de márgenes para especificar efectivamente "100% de ancho menos N píxeles". Vea la respuesta aceptada a esta pregunta .
La forma habitual de hacerlo es según lo descrito por Guffa, elementos anidados. Es un poco triste tener que agregar un margen de beneficio adicional para obtener los ganchos que necesitas para esto, pero en la práctica, un envoltorio div aquí o no va a lastimar a nadie.
Si debe hacerlo sin elementos adicionales (por ejemplo, cuando no tiene control del marcado de la página), puede usar box-sizing , que tiene un soporte de navegador bastante decente pero no completo o simple. Aunque es más divertido que tener que depender de scripting.
Nueva forma en la que acabo de encontrarme: css calc() :
.calculated-width {
width: -webkit-calc(100% - 100px);
width: -moz-calc(100% - 100px);
width: calc(100% - 100px);
}
Fuente: css ancho 100% menos 100px
Podemos lograr esto usando flex-box muy fácilmente.
Si tenemos tres elementos como Header, MiddleContainer y Footer. Y queremos darle cierta altura fija a Encabezado y Pie de página. entonces podemos escribir así:
Para React / RN (los valores predeterminados son ''display'' como flex y ''flexDirection'' como columna), en web css tendremos que especificar el contenedor del cuerpo o el contenedor que contiene estos como display: ''flex'', flex-direction: ''column'' como abajo:
container-containing-these-elements: {
display: flex,
flex-direction: column
}
header: {
height: 40,
},
middle-container: {
flex: 1, // this will take the rest of the space available.
},
footer: {
height: 100,
}
Puedes hacer uso del diseño de Flexbox . flex: 1 establecer flex: 1 en el elemento que necesita tener ancho o altura dinámicos para flex-direction: row and column de flex-direction: row and column respectivamente.
Ancho dinámico:
HTML
<div class="container">
<div class="fixed-width">
1
</div>
<div class="flexible-width">
2
</div>
<div class="fixed-width">
3
</div>
</div>
CSS
.container {
display: flex;
}
.fixed-width {
width: 200px; /* Fixed width or flex-basis: 200px */
}
.flexible-width {
flex: 1; /* Stretch to occupy remaining width i.e. flex-grow: 1 and flex-shrink: 1*/
}
Salida:
.container {
display: flex;
width: 100%;
color: #fff;
font-family: Roboto;
}
.fixed-width {
background: #9BCB3C;
width: 200px; /* Fixed width */
text-align: center;
}
.flexible-width {
background: #88BEF5;
flex: 1; /* Stretch to occupy remaining width */
text-align: center;
}
<div class="container">
<div class="fixed-width">
1
</div>
<div class="flexible-width">
2
</div>
<div class="fixed-width">
3
</div>
</div>
Altura dinámica:
HTML
<div class="container">
<div class="fixed-height">
1
</div>
<div class="flexible-height">
2
</div>
<div class="fixed-height">
3
</div>
</div>
CSS
.container {
display: flex;
}
.fixed-height {
height: 200px; /* Fixed height or flex-basis: 200px */
}
.flexible-height {
flex: 1; /* Stretch to occupy remaining height i.e. flex-grow: 1 and flex-shrink: 1*/
}
Salida:
.container {
display: flex;
flex-direction: column;
height: 100vh;
color: #fff;
font-family: Roboto;
}
.fixed-height {
background: #9BCB3C;
height: 50px; /* Fixed height or flex-basis: 100px */
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.flexible-height {
background: #88BEF5;
flex: 1; /* Stretch to occupy remaining width */
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
<div class="container">
<div class="fixed-height">
1
</div>
<div class="flexible-height">
2
</div>
<div class="fixed-height">
3
</div>
</div>
Si bien la respuesta de Guffa funciona en muchas situaciones, en algunos casos es posible que no desee que el relleno izquierdo y / o derecho sea el elemento principal del div centro. En estos casos, puede usar un contexto de formato de bloque en el centro y hacer flotar los divs de relleno hacia la izquierda y hacia la derecha. Aquí está el código
El HTML:
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
El CSS:
.container {
width: 100px;
height: 20px;
}
.left, .right {
width: 20px;
height: 100%;
float: left;
background: black;
}
.right {
float: right;
}
.center {
overflow: auto;
height: 100%;
background: blue;
}
Creo que esta jerarquía de elementos es más natural cuando se compara con divs anidados anidados, y representa mejor lo que está en la página. Debido a esto, los bordes, el relleno y el margen se pueden aplicar normalmente a todos los elementos (es decir, esta "naturalidad" va más allá del estilo y tiene ramificaciones).
Tenga en cuenta que esto solo funciona en divs y otros elementos que comparten su propiedad ''completar el 100% del ancho por defecto''. Las entradas, las tablas y posiblemente otras requerirán que las envuelva en un contenedor div y agregue un poco más de CSS para restaurar esta calidad. Si tienes la mala suerte de estar en esa situación, contáctame y desenterraré el CSS.
jsfiddle aquí: jsfiddle.net/RgdeQ
¡Disfrutar!
Tal vez estoy siendo tonto, pero ¿no es la mesa la solución obvia aquí?
<div class="parent">
<div class="fixed">
<div class="stretchToFit">
</div>
.parent{ display: table; width 100%; }
.fixed { display: table-cell; width: 150px; }
.stretchToFit{ display: table-cell; vertical-align: top}
Otra forma en la que he descubierto en Chrome es incluso más simple, ¡pero el hombre es un truco!
.fixed{
float: left
}
.stretchToFit{
display: table-cell;
width: 1%;
}
Solo esto debe llenar el resto de la línea horizontalmente, como lo hacen las celdas de tabla. Sin embargo, obtienes algunos problemas extraños con el hecho de que supera el 100% de su padre, al establecer el ancho en un valor porcentual lo soluciona.
Tuve un problema similar en el que quería un banner en la parte superior de la pantalla que tuviera una imagen a la izquierda y una imagen que se repitiera a la derecha y al borde de la pantalla. Acabé resolviéndolo así:
CSS:
.banner_left {
position: absolute;
top: 0px;
left: 0px;
width: 131px;
height: 150px;
background-image: url("left_image.jpg");
background-repeat: no-repeat;
}
.banner_right {
position: absolute;
top: 0px;
left: 131px;
right: 0px;
height: 150px;
background-image: url("right_repeating_image.jpg");
background-repeat: repeat-x;
background-position: top left;
}
La clave era la etiqueta correcta. Básicamente estoy especificando que quiero que se repita desde 131px desde la izquierda hasta 0px desde la derecha.
Puede usar elementos anidados y relleno para obtener un borde izquierdo y derecho en la barra de herramientas. El ancho predeterminado de un elemento div es auto , lo que significa que usa el ancho disponible. Luego puede agregar relleno al elemento y aún se mantiene dentro del ancho disponible.
Este es un ejemplo que puede usar para colocar imágenes como esquinas redondeadas hacia la izquierda y hacia la derecha, y una imagen central que se repite entre ellas.
El HTML:
<div class="Header">
<div>
<div>This is the dynamic center area</div>
</div>
</div>
El CSS:
.Header {
background: url(left.gif) no-repeat;
padding-left: 30px;
}
.Header div {
background: url(right.gif) top right no-repeat;
padding-right: 30px;
}
.Header div div {
background: url(center.gif) repeat-x;
padding: 0;
height: 30px;
}