Useful CSS Code Snippets
Cascading Style Sheets (CSS) is a style sheet language used to change the style of web pages and user interfaces written in HTML and XHTML.
Resizing of Web Page Elements to Browser size
<div class="outer"></div>
with styles…
.outer {
width: 100%;
height: 100%;
CSS fails sometimes when considering browser height due to document vs. window heights. Some JavaScript can help.
<script>
Webflow.push(function () {
var fulls = $('.full-page');
var win = $(window);
Webflow.resize.on(function () {
fulls.height(win.height());
});
});
</script>
For more information: Webflow - How to make hero section always fill browser window
For elements to fill a page, the body of the page has to be the full browser height. To make a vertical element that fills the page, first make the page fill the browser <body>
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#content {
background: #D00;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 0 20px 0 20px;
margin: auto;
font: 1.5em arial, verdana, sans-serif;
width: 960px;
min-height: 100%;
}
Make sure you use #content div "min-height: 100%" instead of "height: 100%" so that if the content of the #content div extends beyond the height of the window, the background will expand as well.
If searching online for more information on this type of stretching use the terms Liquid, Fluid and Elastic. Those are key terms often used in this type of CSS discussion.
