CSS for Multiple Fullscreen Rows w/ Bootstrap

Question

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!

@ikeMiguel 100vh didn't work. Heidel did a fiddle below where 100vh works, but it's not working in my code. Wonder if it's Bootstrap that's causing 100vh not to work. — s15199d, Dec 04 '15 at 14:00
What is row-fluid for?? Do you have the css for that? Instead of using row-fluid, you should use row — Miguel Ike, Dec 04 '15 at 14:06

score 1 · Answer 1 · edited May 23 '17 at 12:23

1

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

edited May 23 '17 at 12:23

Community

1
1

answered Dec 04 '15 at 13:53

Heidel

3,174
16
52
84

Saying its not cross-browser method is wrong, as all new browser can do this. Saying _some older ones_ would be okay though. – Asons Dec 04 '15 at 13:55
@Heidel thanks for the fiddle. Your fiddle works, but it doesn't working when I plug your css into mine. I wonder if Bootstrap is causing 100vh not to work. – s15199d Dec 04 '15 at 14:01

score 1 · Answer 2 · answered Dec 04 '15 at 13:53

1

just replace the height:100% by 100vh

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

answered Dec 04 '15 at 13:53

Fahmi B.

758
2
10
23

score 1 · Answer 3 · answered Dec 04 '15 at 13:58

1

try this may help you in your css

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

answered Dec 04 '15 at 13:58

Anubhav pun

1,323
2
8
20

score 1 · Accepted Answer · answered Dec 04 '15 at 13:59

1

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%
}

answered Dec 04 '15 at 13:59

Miguel Ike

484
1
6
19

100vh isn't working. Wonder if it's b/c of Bootstrap. – s15199d Dec 04 '15 at 14:05
@s15199d instead of using row-fluid, you should use row only. Did you find the solution? – Miguel Ike Dec 04 '15 at 14:28

score 0 · Answer 5 · answered Dec 04 '15 at 13:52

0

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%; }

answered Dec 04 '15 at 13:52

Jagdish Parmar

609
5
11

score 0 · Answer 6 · answered Dec 04 '15 at 13:53

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>

CSS for Multiple Fullscreen Rows w/ Bootstrap

6 Answers6