css - 数字标牌系统中的网站背景全屏

Question

我正在使用 Raspberry Pi 和 Screenly-OSE 作为我们药房的数字标牌解决方案。我在夜间展示各种广告。我正在使用一个非常简单的 Sinatra 应用程序来访问 serve overnights .效果很好，除了一个让我很烦恼的小细节，那里有一个空白区域:见 picture .

我正在使用以下非常简单的 css 文件:

body {
    /* background-color: #246013; */
    background-image:url('moon.jpg');
    color: white; 
    text-align: center;
    font: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#wrapper{
    width:1200px;
    margin:0 auto;
    text-align: center;
}

#content{
    text-align: center;
    margin:auto;
}

#footer{
    text-align: center;
    padding-top: 30px;
    color: #D6D6D6;
    font: 14px "Courier New", Courier, mono;
}

h1 {
    font-size: 80px;
    padding-top: 10px;
    font-weight: bold;
    text-align: center;
}

h2 {
text-align: center;
font-size: 60px;
font-weight: bold;
}


h3 {
    text-align: center;
    font-size: 32px;
    padding-top: 10px;
    padding-bottom: 3px;
    font-weight: bold;
}

h4 {
    text-align: left;
    font-size: 25px;
    padding-top: 5px;
    padding-bottom: 3px;
    text-decoration: underline;
}

h5 {
    text-align: left;
    font-size: 23px;
    padding-top: 5px;
    padding-bottom: 3px;
    font-weight: bold;
}

我想知道是否有办法获得全屏背景覆盖。背景图片封面与文本一起显示，有些天 overdays 会显示，如果 overdays 是 5 或 6，则整个屏幕都会被覆盖。

我知道我可以通过添加 br/ 和/或计算显示的文本行来模拟此行为。但我想知道是否还有其他更自然的方式来实现这一点。

谢谢

Answer 1

确保将 html 和 body 都设置为 100% 高度以使其覆盖所有内容。

html, body {
    height: 100%;
}