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.
One place to put global CSS is in the HTML head after the <title></title> and before the </head>.
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.
Faux Columns
By default CSS elements only stretch vertically as far as they need to so that if an image that is only 150 pixel tall is in thebackground: #ccc url(../images/backgroundcolor.gif) repeat-y 50% 0;
Flexbox
A new CSS module for layout.
.container {
display: -webkit-flex;
display: flex;
}
nav {
width: 200px;
}
.flex-column {
-webkit-flex: 1;
flex: 1;
}
See: Flexbox Tutorial
The problem with Flexbox is that they keep changing the standard so you cant count on the same results from one browser to the next.