个人中心
gpt4 book ai didi

html - 背景图片在移动设备下方留下空白

转载 作者：行者123 更新时间：2023-11-27 23:57:15 25 4
gpt4 key购买 nike

我创建了一个基本上由一个按钮组成的网站，每次您单击该按钮时，上面都会出现一个句子。作为背景，我设置了一张图片。在移动设备上，我遇到的问题是，当出现长句子时，内容会被拉得太长，以至于您必须滚动才能到达页面底部，而在页面底部，图片下方会出现一个空白区域。不过，这个空格并没有出现在开发者工具中，只是出现在我的真实手机上。

到目前为止，我已经花了很长时间寻找解决方案，但我没有找到。我想禁用 background-repeat: no-repeat;在媒体查询中，但这会产生不好的副作用。

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>

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

问候并感谢您的帮助。

最佳答案

我猜这个问题的发生是因为你的内容溢出了它的容器 block ，所以正文在底部显示了额外的白色空间，因为文本占用了比它应该多的空间，我发现你的问题的解决方案之一是通过使用 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:背景图片和文字仅供演示。

关于html - 背景图片在移动设备下方留下空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56198948/

25 4 0
文章推荐： html - 填充影响容器大小？
文章推荐： c++ - 伪随机数和真随机数有什么区别？
文章推荐： c++ - 重载函数调用 double 是不明确的
文章推荐： Javascript 对象键只有在 console.log 展开后才能解析
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com