Useful CSS Code Snippets: Difference between revisions
Jump to navigation
Jump to search
Created page with "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..." |
|||
| Line 24: | Line 24: | ||
For more information: Webflow - [http://forum.webflow.com/t/tutorial-how-to-make-hero-section-always-fill-browser-window/1216(Tutorial) How to make hero section always fill browser window] | For more information: Webflow - [http://forum.webflow.com/t/tutorial-how-to-make-hero-section-always-fill-browser-window/1216(Tutorial) 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. | |||
[[Category:Computer_Technology]] | [[Category:Computer_Technology]] | ||
[[Category:Webdev]] | [[Category:Webdev]] | ||
[[Category:HTML]] | [[Category:HTML]] | ||
Revision as of 09:29, 13 February 2015
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.