100VH在手机上不够高

所以，我正在尝试在桌面网站上制作移动版本(请在此处查看www.adamaucock.com，看看我要去什么(。

我遇到的问题是，我似乎无法正确设置高度，因为我的内容约为页面的一半，然后其余的只是死空间，因此高度设置为窗口太短。与身体标签一起工作不起作用，我已经看到人们也建议包装元素，但我似乎无法做到这一点。我尝试使用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;}

任何帮助将不胜感激。预先感谢。

所以，我刚刚找到了一个解决方案，但是我不确定它在跨设备上的工作能力如何。我使用视口元标记将初始比例设置为.25而不是1。

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

在我必须交出的两个设备上(Google Pixel 1和iPhone 4(，它似乎有效。如果我遇到这种方法的任何问题，将更新。

overflow-y: hidden在身体/html上应执行技巧

<!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>

相关内容

最新更新

热门标签：