Html 使用Off帆板基金会5，将CSS样式应用到所有页面高度100%

我尝试在我的页面上应用一些样式css，我使用Foundation 5 我想对所有页面应用背景色。如图所示，顶部和底部之间有一个空白

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

禁止使用

正文{height:100%；背景色：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>

...

Lorem ipsum dolor sit amet，奉献精英。人身安全、人身安全、人身安全、人身安全、人身安全、人身安全、人身安全、人身安全、人身安全、人身安全、人身安全、人身安全、人身安全、人身安全、人身安全、人身安全、人身安全、人身安全、人身安全、人身安全、人身安全、人身安全、人身安全、人身安全、人身安全、人身安全、人身安全、人身！
权贵们，阿迪皮西，维罗，你们们应该有足够的权利来保护你们们的权利，因为你们们的权利是不自由的！
Nostrum、quas、nulla、VERITIATIS、facere因其生命价值而在贝塔维利特大教堂（maxime atque dolore beatae velit）举行了一场庆祝活动。乌拉姆·雷西恩迪斯·杜西莫斯在多洛里巴斯·雷姆！
您可以将CSS更改为以下内容。它符合您的要求（由@martilp在Fiddle中指定），即不设置Body元素的背景色

试试这个代码

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

modify this
#layer_picture {

    margin-top:10%;
}

如果你想将背景色应用到整个页面，只需使用主体

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

你有一个10%的页边距顶部应用于#层图片，这就是空白的来源
 由于
帆布外包装
和
内包装
阻止
#layer_picture
占据100%的高度，您应该强制它们占据整个高度：

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

如果您想让菜单按钮也具有此背景，请将
背景色
放在父级
非画布包装中
（）：

否则，请将背景保留在
#layer_图片中

如果我是你，我会在
非画布包装中放置一个ID，以确保它不会影响不需要此背景的其他页面。
请参见此处的我的JSFIDLE:。您必须至少设置正文和html高度：100%如果您不想在每个页面上都使用背景色，只需在需要颜色的页面的正文中添加一个类即可。那也是被禁止的吗？@菲莉，你肯定没看见那只鸟！我又做了一个版本，以防你不想把背景色应用到菜单按钮上（只占底部的空间）。@Filly thx，你让我开心！这不符合不设置背景的OP要求，这也不符合OP要求，如果不使用Boyy，如果他使用了基础，将有一个背景颜色应用到身体，以及100%高度属性设置为HTML，体。在你决定否决一个答案之前，请注意这个问题。在这个场景中更改主体背景效果很好。这怎么能不将这种颜色应用到他的每个页面上呢？如果你注意这个问题，看看他的小提琴，你就会知道他在哪里提到他不想把颜色应用到他的所有页面上-你说得对，我错过了小提琴上的评论；我希望在实际问题中张贴任何声明或条件。但是，答案仍然适用，在页面主体中添加一个类。你看过OP的小提琴了吗
body
是“禁止”的，正如他所说的，我对JSFIDLE进行了编辑，正如你所看到的，底部总是有一个空白。好吧，也许他是否复制了p的第一个答案，但最后他得到了一个好答案！thx@ChrisM tooI对JSFIDLE进行了编辑，如您所见，底部总是有一个空白。因为只有在不使用Offcanvas菜单的情况下，解决方案才能工作
<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>

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