问题：
flexbox跨浏览器问题chrome显示正确firefox没有[重复]
郗欣嘉
正在尝试调试flexbox跨浏览器问题。我有一个基本的圣杯布局，带有固定标题的可滚动内容和一个离开画布的左导航。
布局在Chrome 45.0中正确显示。2421.0 m（64位），但不在Firefox 38.05中
Firefox中的问题
1） 没有滚动条
2）页脚丢失或脱离页面
3） 在单击切换按钮之前，画布外的左侧导航不应可见
4） 两侧的列与内容列不齐，看起来稍高一些
附上布局代码
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css");
html, body {
box-sizing: border-box;
height: 100vh;
overflow: hidden;
margin: 0;
padding: 0;
}
*, *:before, *:after {
box-sizing: inherit;
}
.holy-grail {
display: flex;
flex-direction: column;
}
.body {
flex: 1;
display: flex;
flex-direction: row;
color: #333;
background: #333;
}
.content-wrapper {
flex: 1 1 auto;
order: 2;
background: #ffc94e;
display: flex;
flex-direction: column;
}
.content-header {
flex: 0 0 50px;
color: #eee;
background: #2a2a2a;
}
.content {
flex: 1;
overflow: auto;
}
.button {
cursor: pointer;
}
.button:before {
content: '\f0c9';
font: 42px fontawesome;
color: white;
}
.nav-wrapper, .sidebar-wrapper {
flex: 0 0 10em;
display: flex;
flex-direction: column;
}
.nav-wrapper {
order: 1;
transition: flex 1s
}
.nav-wrapper.isOpen {
flex: 0 0 0;
}
.sidebar-wrapper {
order: 3;
}
.nav-header, .sidebar-header {
flex: 0 0 50px;
color: #eee;
background: #2a2a2a;
}
.nav-content, .sidebar-content {
flex: 1;
overflow: auto;
color: white;
}
header {
background: #92e4c9;
height: 50px;
}
footer {
background: #f7846a;
height: 50px;
}<!doctype html>
<html lang="en">
<head>
<title>A Holy Grail Flexbox layout</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="holy-grail">
<header>
<h1>Header</h1>
</header>
<div class="body">
<main class="content-wrapper">
<header class="content-header">Content Header
<a id='button' class="button"></a>
</header>
<div class="content">TEST
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
TestEnd
</div>
</main>
<nav class="nav-wrapper isOpen" id="nav">
<header class="nav-header">Header</header>
<div class="nav-content">
Nav
</div>
</nav>
<aside class="sidebar-wrapper">
<header class="sidebar-header">Header</header>
<div class="sidebar-content">
TEST
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
TestEnd
</div>
</aside>
</div>
<footer>
<h2>Footer</h2>
</footer>
<script>
document.getElementById('button').addEventListener("click", function (e) {
document.getElementsByClassName('nav-wrapper')[0].classList.toggle('isOpen')
e.preventDefault();
});
</script>
</body>
</html>共有1个答案
颜高格
添加以下内容：
.body {
min-height: 0;
}
css prettyprint-override">@import url("http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css");
html, body {
box-sizing: border-box;
height: 100vh;
overflow: hidden;
margin: 0;
padding: 0;
}
*, *:before, *:after {
box-sizing: inherit;
}
.holy-grail {
display: flex;
flex-direction: column;
}
.body {
flex: 1;
display: flex;
flex-direction: row;
color: #333;
background: #333;
min-height: 0;
}
.content-wrapper {
flex: 1 1 auto;
order: 2;
background: #ffc94e;
display: flex;
flex-direction: column;
}
.content-header {
flex: 0 0 50px;
color: #eee;
background: #2a2a2a;
}
.content {
flex: 1;
overflow: auto;
}
.button {
cursor: pointer;
}
.button:before {
content: '\f0c9';
font: 42px fontawesome;
color: white;
}
.nav-wrapper, .sidebar-wrapper {
flex: 0 0 10em;
display: flex;
flex-direction: column;
}
.nav-wrapper {
order: 1;
transition: flex 1s
}
.nav-wrapper.isOpen {
flex: 0 0 0;
}
.sidebar-wrapper {
order: 3;
}
.nav-header, .sidebar-header {
flex: 0 0 50px;
color: #eee;
background: #2a2a2a;
}
.nav-content,
.sidebar-content {
flex: 1;
overflow: auto;
color: white;
}
header {
background: #92e4c9;
height: 50px;
}
footer {
background: #f7846a;
height: 50px;
}
<!doctype html>
<html lang="en">
<head>
<title>A Holy Grail Flexbox layout</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="holy-grail">
<header>
<h1>Header</h1>
</header>
<div class="body">
<main class="content-wrapper">
<header class="content-header">Content Header
<a id='button' class="button"></a>
</header>
<div class="content">TEST
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
TestEnd
</div>
</main>
<nav class="nav-wrapper isOpen" id="nav">
<header class="nav-header">Header</header>
<div class="nav-content">
Nav
</div>
</nav>
<aside class="sidebar-wrapper">
<header class="sidebar-header">Header</header>
<div class="sidebar-content">
TEST
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aut distinctio dolor eaque enim fuga
labore perspiciatis unde? Accusamus atque consectetur eaque et modi molestias provident ratione
reprehenderit ullam.
TestEnd
</div>
</aside>
</div>
<footer>
<h2>Footer</h2>
</footer>
<script>
document.getElementById('button').addEventListener("click", function (e) {
document.getElementsByClassName('nav-wrapper')[0].classList.toggle('isOpen')
e.preventDefault();
});
</script>
</body>
</html>
类似资料：
-
我被一个使用flexbox的测试项目卡住了。我们的目标是构建一个仪表板，其中包含一些卡片列表，并排无限溢出。 我设法做到了这一点，问题是：每个列表都有一个页眉、一个卡片列表和一个页脚，列表高度不能超过父可用高度。如果发生这种情况，则列表只能在卡列表上应用溢出。 在Chrome上运行良好，但在Firefox上...渲染器似乎无法处理内容以这种方式溢出的可能性！我真的很生气。 例子： 代码（也在Plu
-
本文向大家介绍C#浏览器提示跨域问题解决方案，包括了C#浏览器提示跨域问题解决方案的使用技巧和注意事项，需要的朋友参考一下 一，我们使用两个域名互相访问的时候会提示跨域，原因在哪里呢？如下图跨域，我们探究下 是什么原因导致浏览器报这个错呢？ 二，我们研究下看看请求是否成功。，如下图，浏览器返回的是200，证明请求是成功了，同时返回是成功了，那为什么还提示跨域呢？ 三，经过看浏览器跨域的提示可知道“
-
这其实是我关于堆栈溢出的第一个问题，所以我挺兴奋的。 提问：我做了一个需要Flash操作的游戏。我想用不是Chrome的浏览器向网站的访问者显示一条消息。 它将是一个字符串：“如果游戏没有正确加载，尝试使用谷歌Chrome”。 如果你们知道一种方法，在不访问谷歌Chrome时显示这个消息（因为那会有点多余），我将非常感谢！
-
问题内容： 我创建了一个小的搜索小部件，但是通过chrome浏览时，背景不会出现。我已经测试了IE，FF和safari，它们看起来都不错。 http://paradigmsearch.co.uk/widget/?id=1 我通常不愿意将布局问题放在SO上。但是，我已经讨论了一段时间。 在元素上： 我正在应用以下CSS定义 背景只是不可见。如果这确实是一个愚蠢的标记/ CSS监督，那么我深表歉意。
-
我使用&过滤器和标记创建了一个Porter-Duff Out（knockout）效果，它在底部的叶子形状层上切出一个圆形孔。 我在Chrome中的一切都运行良好，但在Firefox和Safari中发现了不同的行为。 Firefox根本不会呈现过滤后的元素，从我的在线搜索来看，原因似乎是Firefox不支持feImage标记中的支离破碎的svg元素。然而，即使我尝试用1）到实际svg文件的完整链接和
-
查了点资料，总结为: 浏览器会解码不同格式的图片为位图 这是正确的吗？ 关于加载浏览器不支持的图片格式 使用: Electron 通信协议: grpc 我可以先把获取到的未支持格式图片(比如jxl)用后端服务解码(比如golang)后在返回给浏览器对吗？ 浏览器如何使用解码的图片数据？ 图片很大的话，如何实现先显示一张完整的预览图，再慢慢变得清晰？ 谢谢