Question

如屏幕截图所示，我无法移除底部的空白区域。我尝试了一些解决方案，但它们没有用。如果有任何解决方案，请告诉我。 http://www.rovedashcam.com/

Answer 1

第一个选项：

body { overflow-x: hidden; }

应该做的伎俩如果它不是一些可能的原因：

您未正确加载.css
...或者您的.css文件已损坏且未解析（也可能部分解析，取决于它是如何破坏的

你注意到我没有关闭我的支架吗？这很容易打破CSS文件...

第二个选项：
在结束<head>：

之前，在页面的</head>标记内添加此内容

<style>body>script+div[style^="text"]{display:none}html,body {overflow-x:hidden!important}</style>

它还会使页脚广告丢失如果这不起作用，我会挑起眉毛。我保证。

选项三

如果上述方法无效，请将其删除，并将此代码放在</body>结尾标记结尾之前。之前，而非之后：

<script type="text/javascript">
var css = 'body{overflow-x:hidden!important}body>script+div[style^="text"]{display:none!important;}',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet) {
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}
setTimeout(function(){
    head.appendChild(style);
}, 500);
<script>

Answer 2

引导程序section { display:block }是问题

添加

#footer_area { display:inline!important }

或类似的

Answer 3

尝试添加#header_area { overflow: hidden; }

Answer 4

我不能确切地说为什么，但我知道在Firefox中这个问题不存在，但Chrome是（webkit），当我从html {删除字体大小声明和-webkit-tap-highlight-color时问题消失了。

不幸的是我无法真正测试这个，因为我无法渲染你的代码，但我认为你禁用这些行，你应该很好。字体大小应在html上以％表示，而不是像素。

编辑：确保你的css重置在bootstrap之前，你的自定义css在重置和引导之后出现。

/* bootstrap.min.css */

html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

Answer 5

尝试将此添加到您的CSS：

body {
   min-height: 100vh;
}

这会将您的身高设置为完全。它应该可以工作，我只是检查将它添加到你的网站，它运作良好。

有关适合页面的更多信息，请参阅Google Chrome开发者的视频：https://youtu.be/299RZ0d1LQY

如何删除我的网站中的空白区域

5 个答案: