Question

我的网站的页脚在Chrome中“浮动”，向下滚动时会出现空白：

在Firefox或Edge中不会发生这种情况。检查了CSS和HTML结构，未发现任何异常-下面提供了相关部分。有补救办法吗？

html {margin: 0; height: 100%}
body {margin: 0; height: 100%}
* {box-sizing: border-box;}
body {font-family: Arial; margin: 0;}

.footdiv6{
background: rgba(145,145,173,1);
background: -moz-linear-gradient(top, rgba(145,145,173,1) 0%, rgba(80,80,131,0.8) 10%, rgba(67,67,122,0.81) 12%, rgba(44,44,130,0.88) 25%, rgba(43,43,132,0.92) 32%, rgba(42,42,135,0.95) 39%, rgba(40,40,138,0.96) 49%, rgba(1,1,36,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(145,145,173,1)), color-stop(10%, rgba(80,80,131,0.8)), color-stop(12%, rgba(67,67,122,0.81)), color-stop(25%, rgba(44,44,130,0.88)), color-stop(32%, rgba(43,43,132,0.92)), color-stop(39%, rgba(42,42,135,0.95)), color-stop(49%, rgba(40,40,138,0.96)), color-stop(100%, rgba(1,1,36,1)));
background: -webkit-linear-gradient(top, rgba(145,145,173,1) 0%, rgba(80,80,131,0.8) 10%, rgba(67,67,122,0.81) 12%, rgba(44,44,130,0.88) 25%, rgba(43,43,132,0.92) 32%, rgba(42,42,135,0.95) 39%, rgba(40,40,138,0.96) 49%, rgba(1,1,36,1) 100%);
background: -o-linear-gradient(top, rgba(145,145,173,1) 0%, rgba(80,80,131,0.8) 10%, rgba(67,67,122,0.81) 12%, rgba(44,44,130,0.88) 25%, rgba(43,43,132,0.92) 32%, rgba(42,42,135,0.95) 39%, rgba(40,40,138,0.96) 49%, rgba(1,1,36,1) 100%);
background: -ms-linear-gradient(top, rgba(145,145,173,1) 0%, rgba(80,80,131,0.8) 10%, rgba(67,67,122,0.81) 12%, rgba(44,44,130,0.88) 25%, rgba(43,43,132,0.92) 32%, rgba(42,42,135,0.95) 39%, rgba(40,40,138,0.96) 49%, rgba(1,1,36,1) 100%);
background: linear-gradient(to bottom, rgba(145,145,173,1) 0%, rgba(80,80,131,0.8) 10%, rgba(67,67,122,0.81) 12%, rgba(44,44,130,0.88) 25%, rgba(43,43,132,0.92) 32%, rgba(42,42,135,0.95) 39%, rgba(40,40,138,0.96) 49%, rgba(1,1,36,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9191ad', endColorstr='#010124', GradientType=0 );
}

.htp04{height:40px} .wi10{width:100%} .fs09{font-size:90%}
.wlink /* white color, hover-only underline */

<html>
<head><!-- meta, link, title, script code--></head>
<!-- div code -->

<body>
<!-- div, a, img, li code-->
<!-- script code (JS); nothing fancy, just buttons-->
</body>

</html> 
<!-- header & footer implemented via PHP, e.g.
<?php include("PHP/header.php"); ?>  -->

<!-- complete footer code -->
<div style="transform:translateY(10px); margin-top:-10px" class="footdiv6 htp04 wi10">
<div class="fs09" style="margin-left:50px; margin-top:12px; color:white; float:left; font-weight:700">
Dragon Notes, &nbsp; Est. 2018 &ensp; &emsp; <a href="About.php" class="wlink">About</a></div>
<h4  class="fs09" style="margin-right:50px; margin-top:12px; margin-bottom: 0; color:white; float:right;">By OverLordGoldDragon</h4></div>

Answer 1

在modalPar内具有类行的Div不够长。这就是为什么当您使窗口变小时，div内容会减少并获得预期结果的原因。

因此，将min-height: 82vh;添加到课程行的height:100%中，应该可以解决您的问题。

Answer 2

页脚中的<h4>元素正在插入一个下边距底部（仅在Chrome中有效）-间隙设置为零后，骑马骑行。

如何在Chrome中修复浮动页脚？

2 个答案: