html - Faça a cor de fundo estender para a área de overflow




css css3 (3)

Esta não é a maneira que eu pretendia alcançar o resultado, como eu gostaria de definir background-image no #body em muitos casos, embora possa ser aceitável subjetivo ao modo como eu #body com as coisas, aqui está o Fiddle . Tenho certeza de que esse problema será resolvido em algum momento no 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>&#60;aside&#62;, 100% height only of visible area, it <em>should</em> be <em>100% of total parent height</em>.</p></aside>
</div>

<header>The body &#62; header element; element 2, order: 1;.</header>
<footer>The body &#62; footer element; element 3, order: 3;.</footer>

</body>
</html>

Se a altura total do conteúdo do pai for 10.000px, mas o overflow: auto elemento overflow: auto for renderizado com uma altura de 700px, como forçar o elemento filho apartado a renderizar dinamicamente como 10.000px em vez do padrão 700px? Você pode ver o fundo branco no momento em que começar a rolar o violino .

  • Não pode adicionar mais elementos ( ::after e ::before são aceitáveis).
  • O elemento aside deve ter sua rolagem de conteúdo com o conteúdo do elemento main através do elemento #body (sem position: fixed; ).
  • O elemento de aside deve ter seu trecho de background-color de fundo do topo em 0px até o fundo (por exemplo, 5.000px ou 10.000px) muito abaixo da dobra visível inicial.
  • O elemento apartado não deve ter seu próprio overflow: auto; .
  • Dinâmico (para os menos conhecedores) implica que não podemos definir uma height estática, por exemplo, height: 10000px pois não saberemos qual será a altura renderizada.

No meu exemplo, no momento em que você começa a rolar as extremidades da background-color verde, quero fazer com que o elemento de separação se estique até o fundo do conteúdo.

<?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>&#60;aside&#62;, 100% height only of visible area, it <em>should</em> be <em>100% of total parent height</em>.</p></aside>
</div>

<header>The body &#62; header element; element 2, order: 1;.</header>
<footer>The body &#62; footer element; element 3, order: 3;.</footer>

</body>
</html>


Não tenho certeza se isso atende a todos os seus critérios, mas e quanto a this solução? Basta envolver o div pai em um contêiner e configurar o estouro para y como assim deve fazer o truque:

.container {
  overflow-y: auto;
}

* {
    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>





overflow