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.