Как исправить плавающий нижний колонтитул в Chrome? - PullRequest
Новая
       0

Как исправить плавающий нижний колонтитул в Chrome?

0 голосов
/ 18 января 2019

Нижний колонтитул моего сайта «плавает» в Chrome, оставляя белый пробел при прокрутке вниз: enter image description here

Это не происходит в Firefox или Edge. Проверена структура CSS и HTML, не обнаружено каких-либо аномалий - соответствующая часть приведена ниже. Любое средство?

Сайт: https://dragonnotes.org

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>

Ответы [ 2 ]

0 голосов
/ 18 января 2019

Элемент <h4> в нижнем колонтитуле вставлял поле нижнего поля (действует только в Chrome) - пробел проходил один раз, устанавливая ноль.

0 голосов
/ 18 января 2019

Div со строкой класса, которая находится внутри modalPar, недостаточно длинна. Вот почему, когда вы уменьшаете окно, содержимое div уменьшается, и вы получаете ожидаемый результат.

Поэтому добавление min-height: 82vh; к добавлению height:100% для строки класса должно исправить вашу проблему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...