html - plugin - plantillas contact form 7
CSS: aplicar el relleno a la caja con desplazamiento, el relleno inferior no funciona (8)
No puedo hacer que funcione el relleno de fondo cuando utilizo overflow-y: auto en un cuadro.
HTML:
<div id="container">
<div id="some_info"></div>
</div>
CSS:
#container {
padding: 3em;
overflow-x: hidden;
overflow-y: auto;
width: 300px;
height: 300px;
background: red;
}
#some_info {
height: 900px;
background: #000;
}
Fiddle: http://jsfiddle.net/rwgZu/
EDITAR: uso Firefox
Aquí hay un enfoque posible que funciona a la perfección:
#container {
overflow-x: hidden;
overflow-y: auto;
width: 300px;
height: 300px;
}
#some_info {
height: 900px;
background: #000;
border: 3em solid red;
}
Basado en la respuesta de isHristov :
#container {
padding: 3em 3em 0 3em; /* padding-bottom: 0 */
overflow-x: hidden;
overflow-y: auto;
width: 300px;
height: 300px;
background: red;
}
#container:after {
content: "";
display: block;
height: 0;
width: 100%;
margin-bottom: 3em; /* length you wanted on padding-bottom */
}
Sin embargo, su solución agrega espacio adicional en navegadores que manejan esta situación correctamente.
La respuesta de Dan Robinson también es excelente a menos que tenga múltiples elementos, en #container, que se muestran / ocultan dinámicamente. En ese caso: last-child podría apuntar a un elemento oculto y no tener ningún efecto.
Dale un estilo al div principal normalmente y haz que el div interno haga lo que quieras que haga.
Elimine overflow-x y overflow en #container , cambie la height al 100% y agregue overflow-y:scroll; en #some_info
#container {
padding: 3em;
width: 300px;
height: 300px;
background: red;
}
#some_info {
height: 100%;
background: #000;
overflow-y:scroll;
width:100%;
}
Demostración de trabajo: http://jsfiddle.net/9yuohxuh/
Las soluciones anteriores no estaban funcionando para mis necesidades, y creo que tropecé con una solución simple.
Si el contenedor y el contenido desbordado comparten el mismo color de fondo, puede agregar un borde superior e inferior con el color que coincida con el color de fondo . Para crear el mismo relleno alrededor, establezca el ancho del borde igual al margen izquierdo y derecho del contenedor.
Enlace a la versión modificada del violín de OP: http://jsfiddle.net/dennisoneil/rwgZu/508/
Un simple ejemplo a continuación.
Nota : coloca los fragmentos en un desplazamiento de desbordamiento , lo que hace que sea un poco más difícil ver lo que está sucediendo. El violín puede ser tu mejor opción de vista previa.
#container {
background: #ccc;
overflow-y: scroll;
height: 190px;
padding: 0 20px;
border-top: 20px solid #ccc;
border-bottom: 20px solid #ccc;
}
#overflowing {
background: #ccc;
}
<div id="container">
<div id="overflowing">
This is content<br/>
This is content<br/>
This is content<br/>
This is content<br/>
This is content<br/>
This is content<br/>
This is content<br/>
This is content<br/>
This is content<br/>
This is content<br/>
This is content<br/>
This is content<br/>
This is content<br/>
This is content<br/>
This is content<br/>
</div>
</div>
Llego tarde a la fiesta, pero pensé que valía la pena agregar una solución diferente que aborda algunas de las inquietudes planteadas anteriormente.
Vine aquí por exactamente el tipo de situación que @Philip planteó en respuesta a la solución de Alexandre Lavoie: he generado dinámicamente el contenido dentro del contenedor, por lo que no puedo aplicar el estilo a un nombre div específico como #some_info .
Afortunadamente, hay una solución simple para los navegadores que admiten CSS3: en lugar de aplicar el relleno inferior al contenedor, aplique un margen inferior al último elemento secundario dentro del contenedor.
#container > :last-child {
margin-bottom: 3em;
}
Siempre que el último elemento secundario en el contenedor div sea un elemento de nivel de bloque, esto debería ser el truco.
DEMO: http://jsfiddle.net/rwgZu/240/
PD: Si la falla de Firefox para desplazarse al final del relleno es de hecho un error (como sugiere @Kyle), todavía no se ha solucionado a partir de Firefox 47.0. ¡Frustrante! Internet Explorer 11.0.9600.17843 muestra el mismo comportamiento. (Google Chrome, por el contrario, muestra el relleno del fondo como se esperaba).
No es solo con relleno de fondo. El margen derecho / borde / espaciado también se ignora (no se puede ver en su ejemplo porque no tiene contenido y el ancho no se está desplazando)
¡Todas las respuestas anteriores fallan en Chrome 43, generando hasta 3 barras de desplazamiento! o si el contenido se desborda #some_info.
Ejemplo: http://jsfiddle.net/LwujL3ad/
Si funcionó para usted, es probable que sea porque el contenido no era tan ancho como el elemento de desplazamiento, o de tamaño fijo.
La solución correcta es:
Configure #some info para mostrar: tabla, y agregue relleno o borde a él, no al contenedor de desplazamiento.
#container {
overflow: scroll;
width: 300px;
height: 300px;
background: red;
padding-bottom:0;
}
#some_info {
display:table;
border: solid 3em red;
height: 900px;
background: #000;
margin-bottom:3em;
color: white;
}
DEMO: http://jsfiddle.net/juh7802x/
El único elemento que no falla, y respeta CUALQUIER borde y relleno que agregue allí como separador es una TABLA.
Intenté, y no importa si es el próximo hijo directo o está anidado muchos elementos en profundidad, cualquier estilo sin contenido NO se expandirá para envolver el contenido, y se mantendrá al 100% del ancho del elemento principal. ¡Lo cual es una tontería, porque tener un contenido MÁS GRANDE que el padre es EXACTAMENTE el escenario en el que se requiere un desplazamiento div!
Para una solución dinámica (tanto el contenedor como el contenido) configure el contenedor de los elementos dentro del contenedor de desplazamiento para mostrar: tabla.
Una solución más sin DIVs adicionales.
#container:after {
content: "";
display: block;
height: 50px;
width: 100%;
}
Trabajando en FF, Chrome, IE8-10.
Hola, ahora estoy acostumbrado a este css
#container {
padding: 3em;
overflow-x: hidden;
overflow-y: auto;
width: 300px;
height: 300px;
background: red;
padding-bottom:0; // add this line in your css
}
#some_info {
height: 900px;
background: #000;
margin-bottom:3em; // add this line in your css
}