Question

我正在创建类似手风琴的移动网页，尝试使用flex系列的CSS属性。简而言之，我得到了这个：
Map section expanded on mobile browser 但我想要这个： Map section expanded on desktop browser

该页面仅包含一组<section>个，每个<header>都有一个可点击的<article>和一个<body> <section id="about"> <header><a href="#about">About</a></header> <article> This will be about. </article> </section> <section id="map"> <header><a href="#map">Map</a></header> <article> This will be a map. </article> </section> <section id="talk"> <header><a href="#talk">Talk</a></header> <article> This will be talk </article> </section> </body>：

<article>

在任何给定时间只显示一个<style> ... section:not(:target) article { display: none; } </style>（其余的隐藏），所以：

deviceheight - height of all the header elements

到目前为止，非常好为了使用设备屏幕的整个高度，也就是说，展开部分的高度应为flex。我已经尝试了html { height: 100% } body { height: 100%; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: stretch; align-content: stretch; justify-content: flex-start; background: yellow; } section:target { flex: 1 1 auto; } section:not(:target) article { display: none; } section:not(:target) { height: auto; flex: 0 1 auto; } section { border: 1px solid black; background-color: green; display: flex; flex-direction: column; align-items: stretch; align-content: stretch; } header { padding: 0.2em; background-image: linear-gradient(to bottom, black, rgba(100, 100, 100, 128)); color: white; font-size: 12pt; font-weight: bold; font-family: "American Typewriter", serif; cursor: pointer; flex: 0 0 auto; } header a { color: white; } article { width: 100%; height: 100%; display: block; background-color: yellowgreen; flex: 1 0 auto; }属性，我可以在我的电脑屏幕（使用Chrome）上按照需要运行它没有问题：

body

当地图部分展开时，这会在带有Chrome的桌面PC上生成类似的内容：
Map section expanded on desktop browser
Map 部分占用了所有可用空间，就像我想要的那样。

现在，使用Mobile Safari，展开的部分不使用所有可用的垂直空间，但仅足以显示其内容：
Map section expanded on mobile browser
可以看出，绿色 Map 部分不会将 Talk 标题向下推到屏幕底部，而是会出现黄色height=device-height背景颜色。

我认为这可以通过指定<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width, height=device-height"/>来解决，但这不会改变任何内容：

{{1}}

我希望扩展部分使用所有可用空间，以便不会看到黄色背景颜色。我的CSS规则中缺少什么？我想避免使用JavaScript。

可以从https://gist.github.com/vramdal/4d764aef41bd39e8c96d

获取完整代码

Answer 1

在支持flex时，Safari似乎落后于Chrome。

这只是使用-webkit前缀的问题。有了那些，并删除height=device-height，我得到了我想要的。

这里是完整的代码：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"/>
    <meta charset="utf-8"/>
    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            -webkit-flex-direction: column;
            align-items: stretch;
            -webkit-align-items: stretch;
            align-content: stretch;
            -webkit-align-content: stretch;
            justify-content: flex-start;
            -webkit-justify-content: flex-start;
            background: yellow;
        }

        section:target {
            flex: 1 1 auto;
            -webkit-flex: 1 1 auto;
        }

        section:not(:target) article {
            display: none;
        }

        section:not(:target) {
            height: auto;
            flex: 0 1 auto;
            -webkit-flex: 0 1 auto;
        }

        section {
            transition: flex 500ms ease-out;
            border: 1px solid black;
            background-color: green;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            -webkit-flex-direction: column;
            align-items: stretch;
            -webkit-align-items: stretch;
            align-content: stretch;
            -webkit-align-content: stretch;
        }

        header {
            padding: 0.2em;
            background-image: linear-gradient(to bottom, black, rgba(100, 100, 100, 128));
            color: white;
            font-size: 12pt;
            font-weight: bold;
            font-family: "American Typewriter", serif;
            cursor: pointer;
            flex: 0 0 auto;
            -webkit-flex: 0 0 auto;
        }

        article {
            width: 100%;
            display: block;
            background-color: yellowgreen;
            flex: 1 0 auto;
            -webkit-flex: 1 0 auto;
        }

    </style>


</head>
<body>
<section id="About">
    <header><a href="#About">About</a></header>
    <article>
        This will be about.
    </article>
</section>
<section id="map">
    <header><a href="#map">Map</a></header>
    <article>
        This will be a map.
    </article>
</section>

<section id="talk">
    <header><a href="#talk">Talk</a></header>
    <article>
        This will be talk
    </article>
</section>

</body>
</html>

如何在移动Safari上将元素弹性拉伸到完整的设备高度？

1 个答案: