Apply css style to all the page height 100% with offCanvas Foundation 5

Question

I try to apply some style css to my page, i work with Foundation 5 I want to apply a background color to all the page. As you can see on the jsfiddle, there is a white space between the top and the bottom.

Anyone know how to cover all the height screen with the background ?

Solution with body { height:100%; background-color: rgba(0,0,0,0.5); } is forbidden because I don't want all my page have this background.

<div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">

        <a class="left-off-canvas-toggle" href="#" >Menu</a>

        <!-- Off Canvas Menu -->
        <aside class="left-off-canvas-menu">
            <!-- whatever you want goes here -->
            <ul>
                <li><a href="#">Item 1</a></li>
                ...
            </ul>
        </aside>

        <div id="layer_picture">
            <div class="row test">
                <div class="medium-6 medium-centered columns">
                    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, porro, necessitatibus consequuntur reiciendis dolore doloribus id repellendus tempora vitae quia voluptas ipsum architecto optio excepturi qui quisquam eligendi hic aliquam!</div>
                          <div>Dignissimos, adipisci, vero, harum deserunt necessitatibus fugiat quaerat omnis accusantium sit magnam unde asperiores impedit quia dolor magni aut sed dolores voluptas accusamus fuga delectus voluptates velit quod non libero!</div>
                          <div>Nostrum, quas, nulla, veritatis, facere incidunt totam vitae eos voluptas odio natus dolores earum consectetur eaque rerum ab at maxime atque dolore beatae velit. Ullam reiciendis ducimus placeat doloribus rem!</div>

                </div>
            </div>
        </div>
        <a class="exit-off-canvas"></a>

    </div>
</div>

http://jsfiddle.net/Sbt75/314/

See my jsfiddle here: http://jsfiddle.net/Sbt75/308/ . You must set at least the body and html height: 100% — Luís P. A., Jun 06 '14 at 16:14
if you don't want the background color on every page, simply add a class to the body on the pages that you want the color. is that forbidden as well? — MilkyTech, Jun 06 '14 at 16:20
I made yet another edition, in case you didn't want the background-color to apply to the menu button (and only take the space that was at the bottom). — Aylen, Jun 06 '14 at 17:25

score 0 · Answer 1 · answered Jun 06 '14 at 16:14

0

You can change your CSS to the following. It meets your requirement (specified by @Martialp in Fiddle) of not setting the background color on the Body element. http://jsfiddle.net/Sbt75/309/

/*required in order to be able to set the div height to 100%*/
html, body{
    height:100%;
}

#layer_picture {
    background-color : rgba(0,0,0,0.5);
    padding-top:10%;
    height: 100%;
}

answered Jun 06 '14 at 16:14

p e p

6,593
2
23
32

I made an edit of the Jsfiddle, as you can see, there is always a white space on the bottom. Because the solution work only if you don't use an Offcanvas menu – mpgn Jun 06 '14 at 16:52

score 0 · Answer 2 · answered Jun 06 '14 at 16:14

0

Try this code

body {
    background-color: rgba(0,0,0,0.5);
}

modify this
#layer_picture {

    margin-top:10%;
}

answered Jun 06 '14 at 16:14

Bharat karotra

132
4

this doesn't meet the op requirement of not setting background on body – MilkyTech Jun 06 '14 at 16:16

score 0 · Answer 3 · answered Jun 06 '14 at 16:15

0

If you want to apply a background color to the entire page, just use the body...

body {
  background: rgb(0,0,0);
  background: rgba(0,0,0,0.5); 
}

You have a 10% margin-top applied to #layer-picture, which is where that whitespace is coming from.

answered Jun 06 '14 at 16:15

squashriddle

166
1
5

this also is not meeting op requirement to not use body – MilkyTech Jun 06 '14 at 16:17
1

If he is using Foundation, there will already be a background color applied to the body, as well as the 100% height attribute set to html, body. Please pay attention to the question before you decide to down vote an answer. Changing the body background in THIS scenario will work just fine. – squashriddle Jun 06 '14 at 16:28
1

and how is this not going to apply this color to every one of his page? if you paid attention to the question and looked at his fiddle, you would've seen where he mentioned he doesnt' want the color applied to all of his pages. -1 – MilkyTech Jun 06 '14 at 16:37
You are correct, I missed the comments in the Fiddle; I was expecting any declarations or conditionals to be posted in the actual question. The answer would still apply however, by adding a class to the body of that page. – squashriddle Jun 06 '14 at 16:51

Aylen · Accepted Answer · 2014-06-06T17:24:45.463

0

Because off-canvas-wrap and inner-wrap are preventing #layer_picture to take 100% of the height, you should force them to occupy the whole height as well:

.off-canvas-wrap, .off-canvas-wrap .inner-wrap,
#layer_picture {
    height: 100%;
}

If you want the menu button to have this background as well, put the background-color in the parent off-canvas-wrap (JSFiddle):

.off-canvas-wrap {
    background-color: rgba(0,0,0,0.5);
}

Otherwise, leave the background in the #layer_picture (JSFiddle).

If I were you I'd put an ID in the off-canvas-wrap to make sure it doesn't affect other pages that don't need this background.

edited Jun 06 '14 at 17:24

answered Jun 06 '14 at 16:16

Aylen

3,524
26
36

did you look at the OP's fiddle. `body` is "forbidden" as he put it – MilkyTech Jun 06 '14 at 16:18
I made an edit of the Jsfiddle, as you can see, there is always a white space on the bottom. – mpgn Jun 06 '14 at 16:51
Well, maybe he copy or not the answer of p e p's the first, but finally he had the good answer ! thx @ChrisM too – mpgn Jun 06 '14 at 17:44

Apply css style to all the page height 100% with offCanvas Foundation 5

4 Answers4