Monday, 26 October 2015

[Question]CSS3 making a web page 100% height of viewport?

Hey guys, I am designing a page as we speak and I am trying out one of those single page layouts that are all the rage these days. I have 2 sections right now and a div that breaks them, I want each section to be 100% as tall as whatever they are viewing it on. Currently I have their heights set to 50em just for the sake of design, but is there a way in CSS3/SASS that I can make each section be the height of the browser window without js or media queries? I haven't got into making it fully responsive yet, but that will be the plan eventually. Here is my code so far for reference:

.mainwrapper{ width:100%; height:50em; background-image:url(../images/car.jpg); background-attachment:fixed; background-size:cover; } #main{ margin: auto auto; padding:1em 0 1em; width:100%; display:block; h1{ font-weight:+1; color:$whitefont; } p{ text-align:center; font-family: $mainfont; color:$whitefont; font-size: 1em; padding:0 1em; } img{ float:left; width:25%; } } 


Epic visual tool

Epson 5030UB 2D/3D 1080p 3LCD Projector Submitted October 26, 2015 at 05:40PM by ThisIsReLLiK http://ift.tt/1Nwos49

No comments:

Post a Comment