dear fellow forumers I am facing some difficulty in making the background for my content-wrap to full height of my web browser. If I use 100vh, the scrollbar would appear. Both 100% and 100vh have the same problem. I was thinking maybe I put at the wrong place. I hope someone can guide me. I will like to make the background of each individual tab to be full height considering the responsive behaviour of the tab navigation. My HTML: <!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Tab Styles Inspiration</title> <meta name="description" content="Tab Styles Inspiration: A small collection of styles for tabs" /> <meta name="keywords" content="tabs, inspiration, web design, css, modern, effects, svg" /> <meta name="author" content="Codrops" /> <link rel="shortcut icon" href="../favicon.ico"> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/tabstyles.css" /> <script src="js/modernizr.custom.js"></script> </head> <body> <div class="container"> <!-- Top Navigation --> <section> <div class="tabs tabs-style-flip"> <nav> <ul> <li><a href="#section-flip-1" class="tab1"><span>Home</span></a></li> <li><a href="#section-flip-2" class="tab2"><span>TAB1</span></a></li> <li><a href="#section-flip-3" class="tab3"><span>TAB2</span></a></li> <li><a href="#section-flip-4" class="tab4"><span>TAB3</span></a></li> <li><a href="#section-flip-5" class="tab5"><span>Settings</span></a></li> </ul> </nav> <div class="content-wrap"> <section id="section-flip-1" ></section> <section id="section-flip-2" ></section> <section id="section-flip-3" ></section> <section id="section-flip-4" ></section> <section id="section-flip-5" ></section> </div><!-- /content --> </div><!-- /tabs --> </section> </div><!-- /container --> <script src="js/cbpFWTabs.js"></script> <script> (function() { [].slice.call( document.querySelectorAll( '.tabs' ) ).forEach( function( el ) { new CBPFWTabs( el ); }); })(); $('.content-wrap').height($(window).height() - $('nav').height()); </script> </body> </html> HTML: My CSS: @import url(http://fonts.googleapis.com/css?family=Raleway:400,500,700); @font-face { font-weight: normal; font-style: normal; font-family: 'codropsicons'; src:url('../fonts/codropsicons/codropsicons.eot'); src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), url('../fonts/codropsicons/codropsicons.woff') format('woff'), url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); } *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } .clearfix:before, .clearfix:after { content: ''; display: table; } .clearfix:after { clear: both; } html{ height: 100% } body { background: #e7ecea; color: #000000; font-weight: 400; font-size: 1em; font-family: 'Raleway', Arial, sans-serif; } a { color: #2CC185; text-decoration: none; outline: none; } a:hover, a:focus { color: #74777b; } .support { display: none; color: #ef5189; text-align: left; font-size: 1.5em; max-width: 1200px; margin: 1em auto 0; padding: 0; } .no-flexbox .support { display: block; } .hidden { position: absolute; width: 0; height: 0; overflow: hidden; opacity: 0; } .container > section { padding: 0 0; font-size: 1.25em; min-height: 100%; } /*****************************/ /* Flip */ /*****************************/ .tabs-style-flip { max-width: 100vw; min-height: 100vh; } .tabs-style-flip nav a { padding: 0; color: #000000; -webkit-transition: color 0.3s; transition: color 0.3s; } .tabs-style-flip nav a.tab1:hover, .tabs-style-flip nav a.tab1:focus, .tabs-style-flip nav li.tab-current a.tab1 { color: #fff; background-image: url(../img/bg_dark.png); } .tabs-style-flip nav a.tab2:hover, .tabs-style-flip nav a.tab2:focus, .tabs-style-flip nav li.tab-current a.tab2 { color: #fff; background-image: url(../img/bg_pone.png); } .tabs-style-flip nav a.tab3:hover , .tabs-style-flip nav a.tab3:focus, .tabs-style-flip nav li.tab-current a.tab3{ color: #fff; background-image: url(../img/bg_eone.png); } .tabs-style-flip nav a.tab4:hover, .tabs-style-flip nav a.tab4:focus, .tabs-style-flip nav li.tab-current a.tab4 { color: #fff; background-image: url(../img/bg_mutec.png); } .tabs-style-flip nav a span { text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-size: 0.6em; } .tabs-style-flip nav a::after { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background-color: #f0f0f0; content: ''; -webkit-transition: -webkit-transform 0.3s, background-color 0.3s; transition: transform 0.3s, background-color 0.3s; -webkit-transform: perspective(900px) rotate3d(1,0,0,90deg); transform: perspective(900px) rotate3d(1,0,0,90deg); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-perspective-origin: 50% 100%; perspective-origin: 50% 100%; } .tabs-style-flip nav li.tab-current a::after { background-color: #fff; -webkit-transform: perspective(900px) rotate3d(1,0,0,0deg); transform: perspective(900px) rotate3d(1,0,0,0deg); } .tabs-style-flip .content-wrap>#section-flip-1{ background-image: url(../img/bg_dark.png); } .tabs-style-flip .content-wrap>#section-flip-2{ background-image: url(../img/bg_pone.png); } .tabs-style-flip .content-wrap>#section-flip-3{ background-image: url(../img/bg_eone.png); } .tabs-style-flip .content-wrap>#section-flip-4{ background-image: url(../img/bg_mutec.png); } @media screen and (max-width: 58em) { .tabs-style-flip nav ul { display: block; box-shadow: none; } .tabs-style-flip nav ul li { display: block; -webkit-flex: none; flex: none; } } /***********************/ /* Tabs */ /***********************/ /* Default tab style */ @font-face { font-weight: normal; font-style: normal; font-family: 'stroke7pixeden'; src:url('../fonts/stroke7pixeden/stroke7pixeden.eot?u58ytb'); src:url('../fonts/stroke7pixeden/stroke7pixeden.eot?#iefixu58ytb') format('embedded-opentype'), url('../fonts/stroke7pixeden/stroke7pixeden.woff?u58ytb') format('woff'), url('../fonts/stroke7pixeden/stroke7pixeden.ttf?u58ytb') format('truetype'), url('../fonts/stroke7pixeden/stroke7pixeden.svg?u58ytb#stroke7pixeden') format('svg'); } .tabs { position: absolute; overflow: hidden; margin: 0 0; width: 100%; height: 100%; min-width: 100vw; max-width: 100vw; min-height: 100vh; max-height: 100vh; font-weight: 300; font-size: 1.25em; } /* Nav */ .tabs nav { text-align: center; } .tabs nav ul { position: relative; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; margin: 0 0; /* auto to 0 */ padding: 0; max-width: 100%; /* 1200px to 100% */ list-style: none; -ms-box-orient: horizontal; -ms-box-pack: center; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; } .tabs nav ul li { position: relative; z-index: 1; display: block; margin: 0; text-align: center; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; } .tabs nav a { position: relative; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.5em; } .tabs nav a span { vertical-align: middle; font-size: 0.75em; } .tabs nav li.tab-current a { color: #74777b; } .tabs nav a:focus { outline: none; } /* Icons */ .icon::before { z-index: 10; display: inline-block; margin: 0 0.4em 0 0; vertical-align: middle; text-transform: none; font-weight: normal; font-variant: normal; font-size: 1.3em; font-family: 'stroke7pixeden'; line-height: 1; speak: none; -webkit-backface-visibility: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-upload::before { content: "\e68a"; } .icon-tools::before { content: "\e60a"; } .icon-plane::before { content: "\e625"; } .icon-joy::before { content: "\e6a4"; } .icon-plug::before { content: "\e69a"; } .icon-home::before { content: "\e648"; } .icon-gift::before { content: "\e652"; } .icon-display::before { content: "\e65e"; } .icon-date::before { content: "\e660"; } .icon-config::before { content: "\e666"; } .icon-coffee::before { content: "\e669"; } .icon-camera::before { content: "\e66f"; } .icon-box::before { content: "\e674"; } /* Content */ .content-wrap { position: absolute; min-width: 100%; } .content-wrap section { display: none; margin: 0 0; padding: 1em; max-width: 100%; text-align: center; } .content-wrap section.content-current { display: block; } /* Fallback */ .no-js .content-wrap section { display: block; padding-bottom: 2em; border-bottom: 1px solid rgba(255,255,255,0.6); } .no-flexbox nav ul { display: block; } .no-flexbox nav ul li { min-width: 15%; display: inline-block; } @media screen and (max-width: 58em) { .tabs nav a.icon span { display: none; } .tabs nav a:before { margin-right: 0; } } Code (CSS): I managed to find a free webhosting to do my testing and preview. http://mytestingpone.site40.net/test.html Free webhosting by 000webhost.
Have you tried html, body {height:100%} id / class { position:absolute; top:0; bottom:0; right:0; left:0;} That's should get rid of the scroll bars. Sorry on my mobile so reply might be a bit vague lol.
Your link is 404, but your CONCEPT sounds like one of those artsy-fartsy bits of design BS that has NO business being done on a website in the first place. Websites scroll for a reason, embrace it... REAL websites don't use massive background images for a REASON... embrace it. Though it looks from the code you posted more like you are trying to make a powerpoint presentation than an actual website with content of value.