Menu
I'll start by saying that I am very very new to web development as a whole and that this is my very first responsive site so please be gentle and bear this in mind, I am the definition of the word noob at this stage. Having searched for an answer for a while and having no luck I'm hoping that someone here could help me out.
I'm trying to make a homepage for this website. The design is simply a block down the left hand side of the page showing the logo at the top and then a series of links underneath, all of which is on the same background. To the right of this is one big image which fills the rest of the screen. I want the whole page to fill the browser window of whatever device it is viewed on so absolutely no scrolling is necessary, i.e. width and height both 100% of the viewport. The width of the page is giving me no grief at all, sweetly adjusting to different screen sizes as I want it, with the sidebar at 20% of the width and the main image at 80%.
The height is a different story however. I can't seem, in any combination of CSS I've tried so far, to be able to get the height to behave at 100% of the viewport. Either the sidebar is too short and the main image is too long or both are too long etc etc. The main image I want to keep the aspect ratio of and just have it overflow it's div as required to keep most of it displayed and the side bar I just want to fit to 100% of the page height. Here is my code at present:
<html> <head> <meta charset="UTF-8"> <title></title> <style> html { height: 100%; margin: 0; padding: 0; } body { height: 100%; margin: 0; padding: 0; } #page { width: 100%; height: 100%; margin: 0; padding: 0; } #sidebar { float: left; width: 20%; height: 100%; padding-bottom: 10; margin: 0; background: url(/Images/bg.jpg); } #slideshow { float: right; width: 80%; height: 100%; overflow: hidden; margin: 0; padding: 0; } #logoimg { width: 80%; margin-top: 10%; margin-left: 10%; margin-right: 10%; } #mainimg { width: 100%; overflow: hidden; } .link { font-family: courier; font-size: 1.3em; text-align: center; padding-top: 7%; padding-bottom: 1%; color: rgba(255,255,255,1.00); } @font-face { font-family: courier; src: url(/courier_new-webfont.ttf); src: url(/courier_new-webfont.eot); src: url(/courier_new-webfont.woff); } </style> </head> <body> <div id="page"><!--Whole page container--> <div id="sidebar"><!--Side bar container--> <div class="link" id="logo"><img id="logoimg" src="/Images/logo.png"></div> <div class="link" id="homelink">Home<!--Home link--></div> <div class="link" id="aboutlink">About<!--About link--></div> <div class="link" id="gallerylink">Gallery<!--Gallery link--></div> <div class="link" id="priceslink">Prices<!--Prices link--></div> <div class="link" id="reviewslink">Reviews<!--Reviews link--></div> <div class="link" id="contactlink">Contact<!--Contact link--></div> <div class="link" id="clientslink">Clients<!--Clients link--></div> </div> <div id="slideshow"><img id="mainimg" src="/Images/main.jpg"><!--Image slideshow container--> </div> </div> </body> </html> Any help with this would be really appreciated and don't hesitate to point out any massively amateur mistakes. I'm willing to take any criticism and learn from it. Thanks
316
Sure! Applying min-height: 100vh to the body element should do the trick. Here, 100vh means that the initial body height will take 100% of the viewport height, whereas the use of min-height instead of height will let the body element grow even more if necessary.
100% is 100% width/height of its parent width/height. And 100vh is not means 100% unless its parent is 100vh height.
It just means 100% of the div or class or tag it is enclosed within.
height: 100% gives the element 100% height of its parent container. height: auto means the element height will depend upon the height of its children.
Here’s just a simplified code example of the HTML:
<div id="welcome"> your content on screen 1 </div> <div id="projects"> your content on screen 2 </div> and here’s the CSS using vh:
div#welcome { height: 100vh; background: black; } div#projects { height: 100vh; background: yellow; } From Here: http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/
It works for me.
71
I have made you a basic set up to show how you would style this. The best way that I have found to set the height to 100%is with the use of jQuery/Javascript. You can find the height of the window and then input that into the css with the use of it.
The way this works is the var wH = $(window).height(); is finding the height and turning that into a number. Then when you use $('.sideBar').css({height: wH}); you are inputing the height into the css of sideBar.
jQuery
function windowH() { var wH = $(window).height(); $('.sideBar, .mainImg').css({height: wH}); } windowH(); This function I wrote is giving those two elements the height of the window. This will allow those two elements to be 100% of any browser's window.
I also recommend turning that nav into a ul which I included in the fiddle to show how that is possible.
JSFIDDLE (Remove 'show' at the end of the url to see code)
The next thing you will need to research is media queries to adjust the content to adapt better to mobile devices. Consider changing the sideBar to a horizontal nav when on mobile devices.
If you want a pure CSS only approach then you can do something like this,
html, body { height: 100%; width: 100%; margin: 0; padding: 0; } By adding height&width to 100% in your html/body you can then use height: 100% on other elements to fill the entire page.
Refer to this JSFIDDLE to see how it works.
Helpful read about responsive web design
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
