Last active
July 14, 2017 09:53
-
-
Save unera/f9b4b1041fa1c6e36a91592a6a1fd12a to your computer and use it in GitHub Desktop.
iphone fill
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" | |
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
<title>тест</title> | |
<style> | |
.fill { | |
width: 100%; | |
height: 100%; | |
} | |
body > div.section { | |
position: fixed; | |
left: 0; | |
right: 0; | |
top: 0; | |
bottom: 0; | |
overflow: hidden; | |
} | |
.flex { | |
display: flex; | |
flex-direction: row; | |
flex-wrap: nowrap; | |
overflow: hidden; | |
padding: 0px; | |
margin: 0px; | |
} | |
.flex >* { | |
padding: 0px; | |
margin: 0px; | |
overflow: hidden; | |
flex: 0 0 auto; | |
} | |
.flex.top { | |
flex-direction: column; | |
} | |
.flex.left { | |
flex-direction: row; | |
} | |
.flex > .size-3 { flex-basis: 12.5%; } | |
.flex > .size-6 { flex-basis: 25%; } | |
.flex > .size-12 { flex-basis: 50%; } | |
.flex > .size-18 { flex-basis: 75%; } | |
.flex > .size-21 { flex-basis: 87.5%; } | |
.flex > .size-24 { flex-basis: 100%; } | |
.overflow-y { | |
overflow-y: auto; | |
-webkit-overflow-scrolling: touch; | |
} | |
.red { border: 1px solid red; } | |
.green { border: 1px solid green; } | |
.dashed.red { border: 1px dashed red; } | |
.dashed.green { border: 1px dashed green; } | |
.dotted { border: 1px dotted black; } | |
*::before, *::after { | |
box-sizing: border-box; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="section flex top"> | |
<div class="size-3 flex left control-panel red"> | |
<div class="size-6 green"> | |
<button class="fill dotted">A</button> | |
</div> | |
<div class="size-12 green"> | |
<button class="fill dotted">B</button> | |
</div> | |
<div class="size-6 green"> | |
<button class="fill dotted">C</button> | |
</div> | |
</div> | |
<div class="size-21"> | |
<div class="flex fill top red dashed"> | |
<div class="size-18 dashed green">контент</div> | |
<div class="size-6 green">нижний блок</div> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment