使用 offCanvas Foundation 5 将 css 样式应用于所有页面高度 100%

Question

我尝试将一些样式 css 应用到我的页面，我使用 Foundation 5 我想为所有页面应用背景颜色。正如您在jsfiddle 上看到的那样，顶部和底部之间有一个空白区域。

有人知道如何用背景覆盖所有高度屏幕吗？

body { height:100%; background-color: rgba(0,0,0,0.5); } 的解决方案被禁止，因为我不希望我的所有页面都有这个背景。

<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/

Answer 1

因为off-canvas-wrap 和inner-wrap 阻止#layer_picture 占据100% 的高度，你也应该强制它们占据整个高度：

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

如果您希望菜单按钮也具有此背景，请将background-color 放在父级off-canvas-wrap (JSFiddle) 中：

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

否则，将背景留在#layer_picture (JSFiddle) 中。

如果我是你，我会在 off-canvas-wrap 中添加一个 ID，以确保它不会影响不需要此背景的其他页面。

Answer 2

您可以将 CSS 更改为以下内容。它满足您不在 Body 元素上设置背景颜色的要求（由 Fiddle 中的@Martialp 指定）。 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%;
}

Answer 3

试试这个代码

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

modify this
#layer_picture {

    margin-top:10%;
}

Answer 4

如果你想为整个页面应用背景颜色，只需使用正文...

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

您将 10% 的边距顶部应用于 #layer-picture，这是该空白的来源。