Full height based on web browser

Hubert jiang Peon

Messages:: 9

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 1

#1

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.

Last edited: Feb 27, 2015

Hubert jiang, Feb 27, 2015 IP

Rick R Greenhorn

Messages:: 2

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 11

#2

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.

Rick R, Feb 28, 2015 IP

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

#3

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.

deathshadow, Mar 2, 2015 IP

Log in or Sign up

Advertising (learn more)

Full height based on web browser

Hubert jiang Peon

Rick R Greenhorn

deathshadow Acclaimed Member

Log in or Sign up

Advertising (learn more)

Full height based on web browser

Hubert jiang Peon

Rick R Greenhorn

deathshadow Acclaimed Member

Useful Searches