试图在Safari中禁用滚动

Question

我需要在不滚动横向版本的情况下制作页面。 页面的高度为100％。

我已经尝试了一切。 在Safari中，我总是可以滚动下方区域。 我得到一个隐藏的区域。

我无法隐藏底栏。 我无法降低身高。我不能让它小于320。 浏览器会在页面底部创建一个额外的白色区域。

（另外，我不能使用JS）

我将感谢任何人的回复。

P.S。在截图中不是我的网站，只是为了显示效果

Answer 1

有几种方法可以实现这一目标。首先，您可以简单地使用填充整个视口的表格，以便在切换方向时均匀分布每个元素。您也可以使用简单的CSS解决这个问题，这样您就可以获得更多控制权并能够利用媒体查询。

查看此工作fiddle

首先，您希望将所有内容包装在填充整个视图的单个父容器中。这样可以防止视图外部存在内容。

<强> HTML

<div class="wrapper">
    <div class="menu">
        The Menu
    </div>
    <div class="hero">
        The Hero
    </div>
    <div class="head">
        Text
    </div>
    <div class="content">
        This is content.
    </div>
</div>

<强> CSS

.wrapper {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

然后，您可以在此处设置每个元素占据父容器的特定百分比，以便重新缩放重新计算元素比例而不是强制滚动。

.menu, .hero, .head, .content {
    position: absolute;
    left: 0;
    width: 100%;
}

.menu {
    top: 0;
    height: 10%;
    background: #eee;
}

.hero {
    top: 10%;
    height: 20%;
    background: #aee;
}

.head {
    top: 30%;
    height: 10%;
    background: #eae;
}

.content {
    top: 40%;
    height: 60%;
    background: #eea;
}

以这种方式实现它将允许您在视图大小更改时更多地控制每个元素的行为。