巨大的横幅填充[关闭]答案

【问题标题】：Huge Banner Padding [closed]巨大的横幅填充[关闭]
【发布时间】：2017-05-05 03:28:00
【问题描述】：

我在网页 www.torontopoet.com/etsystories 中添加了横幅，现在横幅下方是内容开始之前的一大块空白区域。这是我用于横幅的代码：

<div id="banner"> 
</div>
 <style>
html,body
{ height:100%;
width:100%;
}
#banner {
background:url('.png');
width:100%;
height:100%;
background-size:100%;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
 }
</style>

【问题讨论】：

标签： html css padding banner

【解决方案1】：

html,body
{ 
height:100%;
width:100%;
}
#banner 
{
background:url('http://cdn2.hubspot.net/hubfs/418991/realview.jpg');
width:400px;
height:251px;
display:block;
background-size:cover;
background-repeat: no-repeat;
margin:0 auto;
}

【讨论】：

解释这段代码将如何帮助 OP。
如果您指定正确的高度和宽度，则横幅背景图像会覆盖整个部分并且没有空白间距问题
因为这个答案被标记为不合适。（不是答案）更好地编辑你的答案并添加信息这将如何解决 OP 的问题。这就是为什么我再说一遍，这样这个答案将来不会被Moderators 否决和删除
请查看这个jsfieldjsfiddle.net/payal2299/1f56u4x6/4

【解决方案2】：

也没有看到你的 HTML，我真的无话可说，但是......

#banner {
background:url('.png');
width:100%;  
height:100%; <!--- ? --->
background-size:100%;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
}

您确定要让横幅达到其容器高度的 100% 吗？

【讨论】：

应该不会吧？如果我将高度更改为 px 数量，则空白会消失，但当浏览器大小失真时，内容可能会覆盖横幅。
真的需要先看看 HTML，然后我才能说出任何明智的话......
嗨大卫，网站是 www.torontopoet.com/etsystories
我看了一眼，但我真的认为你有更大的担忧。对不起。试着让它先验证。不过，据我所知，您的内容不会覆盖您的横幅。
感谢收看。我认为内容不会覆盖横幅，但内容看起来比横幅低得多，尤其是在手机上。