html - Hacer que el color de fondo se extienda al área de desbordamiento
css css3 (4)
Si la
altura
total del
contenido
del elemento primario es de 10,000 px pero el elemento
overflow: auto
se
procesa
con una altura de 700 px, ¿cómo forzo al elemento secundario
aside
a renderizarse dinámicamente como 10,000 px en
lugar
de los 700 px predeterminados?
Puede ver el fondo blanco en el momento en que comienza a desplazar
el violín
.
-
Es posible que no agregue más elementos (aunque
::aftery::beforeson aceptables). -
El elemento
asidedebe tener su desplazamiento de contenido con el contenido del elementomaintravés del elemento#body(sinposition: fixed;). -
El elemento
asidedebe tener un estiramiento debackground-colordebackground-colordesde la parte superior a 0px hasta la parte inferior (por ejemplo, 5,000px o 10,000px) muy por debajo del pliegue visible inicial. -
El elemento
asideno debe tener su propiooverflow: auto;. -
Dinámico (para los menos expertos) implica que
no
podemos establecer una
heightestática, por ejemplo,height: 10000pxya que no sabremos cuál será la altura representada.
En mi ejemplo, en el momento en que comienzas a desplazarte por los extremos verdes del color de
background-color
, quiero hacer que el elemento
aside
se estire hasta el final del contenido.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Overflow Flex Box Issue</title>
<style type="text/css">
* {border: 0; margin: 0; padding: 0;}
aside
{
background-color: #afa;
order: 2;
width: 20%;
}
body
{
display: flex;
flex-direction: column;
height: 100%;
}
body > header
{
align-self: stretch;
background-color: #faa;
flex: 0 1 auto;
min-height: 56px;
order: 1;
}
body > footer
{
align-self: auto;
background-color: #aaf;
flex: 0 1 auto;
min-height: 36px;
order: 2;
}
html {height: 100%;}
main
{
background-color: #cfc;
order: 1;
width: 80%;
}
#body
{
display: flex;
order: 2;
overflow: auto;
}
</style>
</head>
<body>
<div id="body">
<main>
<article>
<p>article</p>
<p>article</p>
<p>article</p>
<div style="height: 10000px;">10,000px</div>
</article>
</main>
<aside><p><aside>, 100% height only of visible area, it <em>should</em> be <em>100% of total parent height</em>.</p></aside>
</div>
<header>The body > header element; element 2, order: 1;.</header>
<footer>The body > footer element; element 3, order: 3;.</footer>
</body>
</html>
Esta
no
es la forma en que tenía la intención de lograr el resultado, ya que me gustaría establecer
background-image
en el
#body
en muchos casos, aunque puede ser aceptable subjetivamente a cómo manejo las cosas, aquí está el
Fiddle
.
Estoy seguro de que este problema se resolverá en algún momento en el futuro.
#body
{
background-image: linear-gradient(to right, #cfc 0%, #cfc 79%, #afa calc(79% + 4px), #afa 100%);
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Overflow Flexbox Issue</title>
<style type="text/css">
* {border: 0; margin: 0; padding: 0; scroll-behavior: smooth;}
aside
{
background-color: ;
order: 2;
width: 20%;
}
body
{
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
body > header
{
align-self: stretch;
background-color: #faa;
flex: 0 1 auto;
min-height: 56px;
order: 1;
}
body > footer
{
align-self: auto;
background-color: #aaf;
flex: 0 1 auto;
min-height: 36px;
order: 2;
}
html {height: 100%;}
main
{
order: 1;
width: 80%;
}
#body
{
background-image: linear-gradient(to right, #cfc 0%, #cfc 79%, #afa calc(79% + 4px), #afa 100%);
display: flex;
order: 2;
overflow: auto;
}
</style>
</head>
<body>
<div id="body">
<main>
<article>
<p>article</p>
<p>article</p>
<p>article</p>
<div style="height: 10000px;">10,000px</div>
</article>
</main>
<aside><p><aside>, 100% height only of visible area, it <em>should</em> be <em>100% of total parent height</em>.</p></aside>
</div>
<header>The body > header element; element 2, order: 1;.</header>
<footer>The body > footer element; element 3, order: 3;.</footer>
</body>
</html>
No estoy seguro si esto cumple con todos sus criterios, pero ¿qué tal this solución? Simplemente envolver el div padre en un contenedor y configurar el desbordamiento-y en auto como debería hacer el truco:
.container {
overflow-y: auto;
}
Salvo el posicionamiento absoluto, esto no es posible con CSS. Tendrás que usar JavaScript.
Aquí está el problema:
Parte I:
background-color
No tiene una altura definida para el elemento de contenido (
#body
).
Esto significa que la altura depende del contenido.
Un color de fondo solo cubrirá el ancho y la altura del elemento. Puedes ver esto en tu demo. Tan pronto como comienza el desplazamiento, finaliza el color de fondo. Esto se debe a que el área de desbordamiento está fuera del área de ancho / alto del elemento.
De la especificación:
Los autores pueden especificar el fondo de un elemento (es decir, su superficie de representación) como un color o una imagen. En términos del modelo de caja , "fondo" se refiere al fondo del
content, elpaddingyborderáreas deborder.
Por lo tanto, las propiedades de fondo CSS están diseñadas para cubrir un área hasta los bordes del elemento. No cubren el área del margen. No se desbordan.
Parte II:
overflow
Esta es otra razón para el color de fondo truncado.
La propiedad de
overflow
solo se aplica al contenido.
No tiene nada que ver con los fondos.
De la especificación:
11.1.1 Desbordamiento: la propiedad de
overflowEsta propiedad especifica si el contenido de un elemento contenedor de bloques se recorta cuando desborda el cuadro del elemento.
Con estos dos obstáculos en el camino, CSS no es útil para resolver este problema (excepto por posibles hacks). La única forma de hacer que un color de fondo llene toda la longitud de un contenedor de tamaño dinámico sería con un script.
* {
border: 0;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
position: relative;
}
.container {
display: flex;
flex-direction: column;
overflow: auto;
}
.main-content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
overflow: auto;
}
main {
flex: 5;
}
aside {
flex: 1;
}
header {
min-height: 36px;
background-color: yellowgreen;
position: fixed;
width: 100%;
top: 0;
}
main {
background-color: #cfc
}
aside {
background-color: #afa;
}
footer {
background-color: indigo;
min-height: 36px;
position: fixed;
width: 100%;
bottom: 0;
}
<div class="container">
<header>header</header>
<div class="main-content">
<main>
<article>
<p>article</p>
<div style="height: 10000px;">10,000px</div>
</article>
</main>
<aside>
aside
</aside>
</div>
<footer>footer</footer>
</div>