make footer expand to fill empty vertical space
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
desmukh 2023-02-03 17:30:51 +05:00
parent b26824efa8
commit fd2e637e92
8 changed files with 27 additions and 9 deletions

View File

@ -1,7 +1,7 @@
<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"},"margin":{"top":"var:preset|spacing|80"}},"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"backgroundColor":"secondary","textColor":"background","layout":{"type":"constrained"},"fontSize":"small"} --> <!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"},"margin":{"top":"var:preset|spacing|70"}},"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"backgroundColor":"secondary","textColor":"background","className":"footer","layout":{"type":"constrained"},"fontSize":"small"} -->
<div <div
class="wp-block-group has-background-color has-secondary-background-color has-text-color has-background has-link-color has-small-font-size" class="wp-block-group footer has-background-color has-secondary-background-color has-text-color has-background has-link-color has-small-font-size"
style="margin-top:var(--wp--preset--spacing--80);padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"> style="margin-top:var(--wp--preset--spacing--70);padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
<!-- wp:columns --> <!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"15%"} --> <div class="wp-block-columns"><!-- wp:column {"width":"15%"} -->
<div class="wp-block-column" style="flex-basis:15%"></div> <div class="wp-block-column" style="flex-basis:15%"></div>

View File

@ -21,6 +21,16 @@ Use it to make something cool, have fun, and share what you've learned
with others. with others.
*/ */
html, body {
height: 100%;
}
.wp-site-blocks{
display: flex;
flex-direction: column;
height: 100%;
}
.wp-site-blocks h2 { .wp-site-blocks h2 {
display: flex; display: flex;
height: 36px; height: 36px;
@ -69,4 +79,12 @@ with others.
margin-bottom: -90px; margin-bottom: -90px;
z-index: -20; z-index: -20;
position: relative; position: relative;
}
.wp-site-blocks footer {
flex-grow: 1;
}
.wp-site-blocks .footer {
height: 100%;
} }

View File

@ -50,4 +50,4 @@
</div> </div>
<!-- /wp:group --> <!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","theme":"autonomic-block-theme"} /--> <!-- wp:template-part {"slug":"footer","theme":"autonomic-block-theme","tagName":"footer"} /-->

View File

@ -41,4 +41,4 @@
</div> </div>
<!-- /wp:group --> <!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","theme":"autonomic-block-theme"} /--> <!-- wp:template-part {"slug":"footer","theme":"autonomic-block-theme","tagName":"footer"} /-->

View File

@ -25,4 +25,4 @@
<!-- /wp:columns --> <!-- /wp:columns -->
</div> </div>
<!-- /wp:group --> <!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","theme":"autonomic-block-theme"} /--> <!-- wp:template-part {"slug":"footer","theme":"autonomic-block-theme","tagName":"footer"} /-->

View File

@ -35,4 +35,4 @@
</div> </div>
<!-- /wp:group --> <!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","theme":"autonomic-block-theme"} /--> <!-- wp:template-part {"slug":"footer","theme":"autonomic-block-theme","tagName":"footer"} /-->

View File

@ -24,4 +24,4 @@
</div> </div>
<!-- /wp:group --> <!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","theme":"autonomic-block-theme"} /--> <!-- wp:template-part {"slug":"footer","theme":"autonomic-block-theme","tagName":"footer"} /-->

View File

@ -26,4 +26,4 @@
</div> </div>
<!-- /wp:group --> <!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","theme":"autonomic-block-theme"} /--> <!-- wp:template-part {"slug":"footer","theme":"autonomic-block-theme","tagName":"footer"} /-->