Question

所以，我正在尝试在我的桌面网站上制作一个移动版本（看看这里我要去看看www.adamaucock.com）。

我遇到的问题是我似乎无法正确设置高度，因为我的内容大约是页面的一半，然后其余部分只是死空间，因此窗口的高度设置得太短。使用body标签不起作用，我看到人们也建议包装元素，但我似乎无法让它工作。我尝试过使用vh和％。我也尝试将x和y的溢出分别隐藏在两个元素上，但无济于事。

唯一解决问题的方法是设置修补包装，但滚动根本不起作用。

HTML：

<body>
<div id="wrapper">
    <div class="box" id="welcome_box">
        <div class="welcome_title">
            <h2 id="video_head">Hi, I'm Adam.</h2>
            <h1>And here I am testing this website.</h1>
            <h3>Scroll to See More</h3>
        </div>
    </div>
</div>

CSS：

body {
    background-color: #04244F;
    font-family: raleway;
    margin: 0;
    padding: 0;}

#wrapper {
    width: 500vw;
    height: 100vh;
    background-color: aqua;}

非常感谢任何帮助。提前谢谢。

Answer 1

body / html上的

overflow-y: hidden应该可以解决问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            overflow-y: hidden;
        }
        body {
            background-color: #04244F;
            font-family: raleway;
        }

        #wrapper {
            width: 500vw;
            height: 100vh;
            background-color: aqua;
        }
        h2 {
            margin: 0;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div class="box" id="welcome_box">
            <div class="welcome_title">
                <h2 id="video_head">Hi, I'm Adam.</h2>
                <h1>And here I am testing this website.</h1>
                <h3>Scroll to See More</h3>
            </div>
        </div>
    </div>
</body>
</html>

Answer 2

所以，我刚刚找到了一个解决方案，但我不确定它在各种设备上的效果如何。我使用视口元标记将初始比例设置为.25而不是像这样。

<meta name="viewport" content="width=device-width, initial-scale=.25">

在我必须提供的两个设备上（Google Pixel 1和iPhone 4）它似乎有用。如果我遇到这种方法的任何问题，将会更新。

100vh在手机上不够高

2 个答案: