CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
s15199d
s15199d

Reputation: 7717

CSS for Multiple Fullscreen Rows w/ Bootstrap

I need help with the CSS to have 5 rows stacked on top of each other, and each row is 100% height and 100% width of the browser.

Here's my HTML:

<div id="wrapper">
<div class="container-fluid">

    <div class="row-fluid fullscreen"><a name="1"></a>          
        <h1>section 1</h1>
    </div>

    <div class="row-fluid fullscreen"><a name="2"></a>
        <h1>section 2</h1>
    </div>

    <div class="row-fluid fullscreen"><a name="3"></a>          
        <h1>section 3</h1>
    </div>

    <div class="row-fluid fullscreen"><a name="4"></a>          
        <h1>section 4</h1>
    </div>

    <div class="row-fluid fullscreen"><a name="5"></a>          
        <h1>section 5</h1>
    </div>

</div>

Here's my CSS:

html,body { margin:0; padding:0; }
.fullscreen { height:100%; width:100%; }

Thanks in advance!

Upvotes: 1

Views: 818

Answers (6)

Miguel Ike
Miguel Ike

Reputation: 484

Instead of using 100% for your height, you could use 100vh. vhis viewport height.

Your .fullscreen css should now be:

.fullscreen {
    height: 100vh;
    width: 100%
}

Upvotes: 1

Anubhav pun
Anubhav pun

Reputation: 1323

try this may help you in your css

html, body
{
height: 100%;
}
 body 
{
min-height: 100%;
}
.fullscreen
{
height:100vh;
}

Upvotes: 1

Elow
Elow

Reputation: 597

CSS:

html,body {
 height: 100%;
 width: 100%;
 margin:0; 
 padding:0;
 position: relative;
}

#wrapper {
 height: 100%;
 width: 100%;
}

.container-fluid {
 height: 100%;
 width: 100%;
}
.fullscreen {
 height: 100%;
 width: 100%;
 position: relative;
}

HTML:

<div id="wrapper">
<div class="container-fluid">

    <div class="row-fluid fullscreen"><a name="1"></a>          
        <div class="span12"><h1>section 1</h1><span>
    </div>

    <div class="row-fluid fullscreen"><a name="2"></a>
        <div class="span12"><h1>section 2</h1><span>
    </div>

    <div class="row-fluid fullscreen"><a name="3"></a>          
        <div class="span12"><h1>section 3</h1><span>
    </div>

    <div class="row-fluid fullscreen"><a name="4"></a>          
        <div class="span12"><h1>section 4</h1><span>
    </div>

    <div class="row-fluid fullscreen"><a name="5"></a>          
        <div class="span12"><h1>section 5</h1><span>
    </div>

</div>

Upvotes: 0

Fahmi B.
Fahmi B.

Reputation: 798

just replace the height:100% by 100vh

.fullscreen { height:100vh; width:100%; }

Upvotes: 1

Heidel
Heidel

Reputation: 3254

You could use viewport height property to set height of each div equals screen height like height: 100vh;

.fullscreen { width:100%; height: 100vh; }

http://jsfiddle.net/05w2bhoz/

You can read about it for example here or just google it.
But unfortunately it's not cross-browser method, so if you need full support you should use js or jQuery to set height of each div equals window height. Read this Get the browser viewport dimensions with JavaScript

Upvotes: 1

Jagdish Parmar
Jagdish Parmar

Reputation: 599

See example maybe used for you: fiddle

CSS:

html,body {margin:0; padding:0; height:100%; width:100%;}
#wrapper, .container-fluid, .fullscreen { height:100%; width:100%; }

Upvotes: 0

Related Questions