Question

我遇到了一个小问题：我的网站在我的所有桌面浏览器上运行正常（即使在＃34;移动模式＆＃34;使用Chrome开发者工具），但当我尝试在手机上看到它时（iPhone 5s）），背景图像消失。

我发现＆＃34;身高＆＃34;应用于任何容器div是问题。当我尝试将其他高度应用于汽车或100％时，就会发生这种情况。

代码（我推迟了脚本和其他无用的面板）

HTML：

<div class="body">
    <div id="ext" class="container">
        <img src="logo.png" class="logo" />
        <img src="logo-dark.png" class="logo logomenu" />
        <div class="extender">
            <div class="panel menu">
                <div class="block">
                    <div class="content">
                        <a id="index" onclick="link(event, 'index')" href="#">Accueil</a>
                        <a id="portfolio" onclick="link(event, 'portfolio')" href="#">Portfolio</a>
                        <a id="contact" onclick="link(event, 'contact')" href="#">Contact</a>
                    </div>
                </div>
            </div><!--
                -->
            <div class="panel">
                <div class="block">
                    <div class="content">
                        <h1> Développeur, designer, entrepreneur </h1>
                        <img class="profil" src="profil.jpg"/>
                        <p>
                        Je suis dans le milieu du développement web et du design depuis maintenant 2 ans, et je propose mes services en tant que developpeur et designer freelance.<br />
                        Si tu veux voir mes précédents projets, ils sont disponibles sur mon <a href="portfolio.php">portfolio</a><br /><br />

                        Un peu d'expérience c'est bien, mais un diplôme ça l'est aussi. Je prépare une certification de Chargé de production web et digital à Efficom dans le but de décrocher un master si je ne perce pas avant !<br /><br />
                        Afin d'approfondir mes connaissances du travail en entreprise après avoir effectué un bref stage d'un mois et demi, je recherche une entreprise pour m'accueillir en tant qu'alternant dès la rentré 2018.<br />
                        Si mon profil t'intéresse, <a href="portfolio.php">contact moi</a> !
                        </p>
                    </div>
                </div>
            </div> [...]

SCSS

.container {
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
// height: 100vh;
position: fixed;
background-position: 20% 0%;
background-size: cover;
background-image: url('bg.png');

.panel {
        display: inline-block;
        width: calc(100% / 4);
        height: 100vh;          <- This is ruining
        vertical-align: top;

        .block{
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center; [...]

谢谢大家！

编辑：

我的白色面板上应用的背景颜色也是负责任的，当我删除它时，它可以工作，但我真的需要这个背景！

Answer 1

好的，我找到了一个解决方案，说实话并不好，但至少他们的背景是......

我没有在面板上添加背景颜色，而是将线性渐变放到大容器中：

        background: linear-gradient(to right, rgb(240, 240, 240), rgb(240, 240, 240) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0));

Safari

1 个答案: