Difference between revisions of "Useful CSS Code Snippets"
From Free Knowledge Base- The DUCK Project: information for everyone
(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...") |
(→Resizing of Web Page Elements to Browser size) |
||
| 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 11: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.
