Ancho de división 100% menos cantidad fija de píxeles
https://stackoverflow.com/questions/651317
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
¿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 variará, pero tendrá valores de píxeles exactos y toda la estructura debería escalar de acuerdo con esos valores. Para simplificarlo, necesitaría una forma de establecer " 100% - n px " ancho a los divs superior-medio e inferior-medio.
Agradecería una solución limpia para varios 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 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 solo controlar el tamaño de un elemento (el medio).
Solución
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.
Aquí hay un ejemplo que puede usar para colocar imágenes como esquinas redondeadas izquierda y 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;
}
Otros consejos
Nueva forma que acabo de encontrar: css calc () :
.calculated-width {
width: -webkit-calc(100% - 100px);
width: -moz-calc(100% - 100px);
width: calc(100% - 100px);
}
Fuente: css ancho 100% menos 100px
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 padre del div central. En estos casos, puede usar un contexto de formato de bloque en el centro y flotar los divisores de relleno a izquierda y 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 en comparación con los div anidados anidados, y representa mejor lo que hay 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 'llenar el 100% del ancho por defecto'. Las entradas, tablas y posiblemente otros requerirán que los 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
¡Disfruta!
Puede utilizar Flexbox diseño. Debe configurar flex: 1 en El elemento que debe tener un ancho o alto dinámico para flex -dirección: fila y columna 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>
La forma habitual de hacerlo es como lo describe Guffa, elementos anidados. Es un poco triste tener que agregar un marcado adicional para obtener los ganchos que necesita para esto, pero en la práctica un divisor de envoltura aquí o allá no le hará daño 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. Probablemente más divertido que tener que confiar en las secuencias de comandos.
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 que he descubierto en Chrome es aún más simple, ¡pero hombre, es un truco!
.fixed{
float: left
}
.stretchToFit{
display: table-cell;
width: 1%;
}
Esto solo debería llenar el resto de la línea horizontalmente, como lo hacen las celdas de la tabla. Sin embargo, tiene algunos problemas extraños con el hecho de que supera el 100% de su padre, sin embargo, establecer el ancho en un valor porcentual lo corrige.
Podemos lograr esto usando flex-box muy fácilmente.
Si tenemos tres elementos como Encabezado, Contenedor medio y Pie de página. Y queremos darle una altura fija al Encabezado y al 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: 'columna' como a continuación:
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,
}
¿qué pasa si su div de envoltura era del 100% y usó relleno para una cantidad de píxeles?
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 repetida a la derecha en el borde de la pantalla. Terminé 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.
En algunos contextos, puede aprovechar la configuración del margen para especificar efectivamente "100% de ancho menos N píxeles". Vea la respuesta aceptada a esta pregunta .
