Question

我创建了一个基本上由一个按钮组成的网站，每当您单击该按钮时，都会在其上方显示一个句子。作为背景，我已经设定了图片。在移动设备上，我遇到一个问题，当长句子出现时，内容会被拉伸得太多，以至于您不得不滚动才能到达页面底部，而在页面底部却在图片下方显示了空白。但是，这个空格不会出现在开发人员工具中，只是在我的真实手机上。

到目前为止，我已经花了很多时间寻找解决方案，但是我没有找到解决方案。我虽然要禁用背景重复：不重复；在媒体查询中，但这会有不利的副作用。

html, body{
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
    overflow-x:hidden;
}

body {
    background-image: url('../Images/BG.jpg');
    background-repeat: no-repeat;
    background-size:cover;
    color: #FFF;
    font-size: 125%;
    font-family: Arial, 'Lucida Sans Unicode';
    line-height: 1.5;
    text-align: center;
}

This is the HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <title>Generator</title>
    <link rel="stylesheet" type="text/css" href="Css/style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0>   
</head>

<body >
<div id="main">
    <header class="header">
        <h1> Generator<span style="color:red">.com</span> </h1>
    </header>

    <div class="mainContent">
        <article id="spruchErstellen">
        </article>
    </div>

    <div class="mainButton">
        <button class="button" onclick="neuerSpruch()">Go!</button>
    </div>

</div>

<div id="space">
</div>

    <footer id="mainFooter">
        <p>Copyright &copy 2019; All Rights Reserved</p>
    </footer>

<script src="javascript.js"></script>

</body>
</html>

我希望背景图片始终充满整个屏幕并且没有空白。

问候，感谢您的帮助。

Answer 1

我猜发生的问题是由于您的内容溢出了其容器块，所以主体在底部显示了白色的额外空间，因为文本占用了比应有的更多空间，我发现您的问题的解决方法之一是通过使用overflow-y:auto

将垂直溢出设置为自动

html, body{
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
    overflow-y:auto;
 
}
body {
    background-image: url('https://image.freepik.com/vector-gratis/fondo-abstracto-acuarela-efecto-grunge_1340-4291.jpg');
    background-repeat: no-repeat;
    background-size:cover;
    color: #FFF;
    font-size: 125%;
    font-family: Arial, 'Lucida Sans Unicode';
    line-height: 1.5;
    text-align: center;
}

<!DOCTYPE html>
<html lang="de">
<head>
    <title>Generator</title>
    <link rel="stylesheet" type="text/css" href="Css/style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0>   
</head>

<body >
<div id="main">
    <header class="header">
        <h1> Generator<span style="color:red">.com</span> </h1>
    </header>

    <div class="mainContent">
        <article id="spruchErstellen">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas justo sit amet cursus tempus. Ut nec ligula vestibulum, aliquet tellus ac, pellentesque dolor. Fusce egestas congue nibh vel ultrices. Duis mollis arcu at sollicitudin tempus. Nam sed felis quis ligula dictum fermentum. Sed eget arcu sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo tellus, tempus faucibus arcu sit amet, tempor dignissim purus. Etiam rutrum fermentum accumsan. Sed interdum libero in laoreet aliquam. Integer sed dolor enim. Fusce aliquam ullamcorper dictum. Sed vehicula euismod felis, ornare condimentum metus dictum vel. Nam vestibulum ante eget ipsum efficitur pellentesque. Aliquam ac facilisis magna, eget rutrum erat. Pellentesque at quam ut metus pellentesque vulputate in ut eros.

Nam varius fermentum felis vel fringilla. Aliquam et sapien accumsan, viverra leo vel, iaculis nunc. Nullam vehicula cursus orci in malesuada. Quisque lacinia metus non lectus elementum, vel commodo augue blandit. Mauris dictum odio ut purus mattis rhoncus. Nam auctor consequat risus auctor euismod. Morbi aliquam eros nisl, in egestas tortor feugiat a. Morbi viverra nec mauris sed tempus. Cras blandit sagittis eros.

Aenean tempor risus odio, ut pretium massa mollis sed. Duis finibus justo non sem volutpat convallis. Donec rutrum nec lectus vitae iaculis. Aenean vitae tellus tristique, porta turpis nec, volutpat sem. Aliquam molestie scelerisque arcu in auctor. Nam suscipit est at est dictum maximus. Nulla facilisi. Phasellus eget mattis mauris, nec bibendum arcu. Cras ornare egestas eleifend. Integer semper elementum euismod. Sed a ligula risus. Fusce commodo sem sit amet malesuada blandit. Donec at justo et metus viverra aliquam eget sit amet turpis.

Integer ligula tellus, accumsan volutpat risus vitae, suscipit accumsan neque. Quisque sed efficitur urna. Nullam mollis ultricies enim, vitae interdum ipsum consequat consectetur. Phasellus tincidunt nunc ut nisi ullamcorper, in laoreet erat mollis. Vivamus a semper orci, sed vestibulum risus. Aenean ultrices quam tristique vestibulum vulputate. Praesent rutrum tempor libero, vitae sollicitudin tellus iaculis sit amet. Proin vulputate tellus tellus, sit amet dignissim sem venenatis sed. Pellentesque cursus lorem eu mauris malesuada scelerisque. Integer quis pulvinar urna. Aenean vitae porta ex, sit amet hendrerit lorem. Mauris dictum magna vitae imperdiet placerat.

Duis consectetur nec sem et hendrerit. Fusce ut porttitor arcu. Curabitur condimentum volutpat congue. Phasellus mauris dolor, commodo id felis sit amet, ornare imperdiet ante. Integer dignissim elit sit amet magna rutrum, vitae interdum dolor dignissim. Phasellus vulputate ac quam non porta. Nam viverra sapien vel metus consequat, vitae rutrum risus posuere. Fusce nec pellentesque sapien. Curabitur non efficitur nunc, at sodales sapien. Donec vulputate, tellus id rhoncus euismod, mauris lacus imperdiet urna, non ornare risus quam a diam. Maecenas sit amet libero ante. Aliquam non mauris a risus vehicula imperdiet. Donec volutpat euismod vulputate. Morbi nec egestas lectus, a aliquet nisi.
        </article>
    </div>

    <div class="mainButton">
        <button class="button" onclick="neuerSpruch()">Go!</button>
    </div>

</div>

<div id="space">
</div>

    <footer id="mainFooter">
        <p>Copyright &copy 2019; All Rights Reserved</p>
    </footer>

<script src="javascript.js"></script>

</body>
</html>

PS：背景图片和文字仅供演示。

背景图片在手机上留下白色空间

1 个答案: