Skip to content

Instantly share code, notes, and snippets.

@glennfu

glennfu/layout.erb Secret

Created June 22, 2016 21:18
Show Gist options
  • Save glennfu/ba776039e1377699eb81f75952865606 to your computer and use it in GitHub Desktop.
Save glennfu/ba776039e1377699eb81f75952865606 to your computer and use it in GitHub Desktop.
Download ZIP
Test layout of height issue for turbolinks-ios
Raw
layout.erb
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script src="/turbolinks.js"></script>
<style type="text/css" media="screen">
html {
box-sizing: border-box;
display: flex;
min-height: 100%;
}
body {
margin: 0;
display: flex;
flex: 1 1 0;
}
.container {
display: flex;
flex: 1 1 0;
flex-direction: column;
}
.row {
display: flex;
flex: 1 1 0;
justify-content: center;
align-items: center;
}
.one {
background-color: #333;
flex: 0 1 44px;
}
.two {
align-items: center;
display: flex;
flex: 1 1 0;
justify-content: center;
text-align: center;
}
.three {
background-color: #F33;
flex: 0 1 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="row one">One</div>
<div class="row two">Two</div>
<div class="row three">Three</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment