我正在创建一个类似 Accordion 的移动网页，尝试使用 flex CSS 属性系列。
简而言之，我明白了:
但我想要这个:
该页面仅由一组 <section> 组成s，他们每个人都有一个可点击的 <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属性，我可以毫无问题地在我的 PC 屏幕上按预期工作(使用 Chrome):
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;
}
当 Map 部分展开时，这会在装有 Chrome 的台式电脑上生成如下内容:
Map 部分占据了所有可用空间，正如我预期的那样。
现在，对于 Mobile Safari，展开的部分不会使用所有可用的垂直空间，而是仅够显示其内容:
可以看出，绿色的 Map 部分没有将 Talk 标题推到屏幕底部，而是黄色的 body。背景颜色出现。
我认为这可以通过指定 height=device-height 来纠正，但这并没有改变任何东西:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width, height=device-height"/>
我希望扩展部分使用所有可用空间，这样就看不到黄色背景色。我的 CSS 规则中缺少什么？我想避免使用 JavaScript。
完整代码可以从https://gist.github.com/vramdal/4d764aef41bd39e8c96d获取
最佳答案
Safari 似乎在支持 flex 方面落后于 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>
关于css - 如何在移动 Safari 上将元素 flex 拉伸(stretch)到整个设备高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25443645/