Skip to content

Instantly share code, notes, and snippets.

@tigawa

tigawa/table-cell.html

Created August 5, 2016 23:32
Show Gist options
  • Save tigawa/0134fb648920c83f36299eac68988f49 to your computer and use it in GitHub Desktop.
Save tigawa/0134fb648920c83f36299eac68988f49 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
table-cell.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
html {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
height: 100%;
}
.header{
height: 50px;
width: 100%;
background-color: yellow;
vertical-align: middle;
text-align: center;
}
.nav{
display: inline-block;
height: 100%;
width: calc(100% - 100px);
background-color: gold;
line-height: 50px;
}
.info{
float: right;
display: inline-block;
height: 100%;
width: 100px;
background-color: silver;
line-height: 50px;
}
main {
height: 100%;
width: 100%;
display: table;
}
.side{
display: table-cell;
height: 100%;
width: 150px;
padding: 5px;
background-color: orange;
}
.contents-body{
display: table-cell;
height: 100%;
padding: 5px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="header">
<div class="nav">
nav
</div>
<div class="info">
info
</div>
</div>
<main>
<div class="side">
side
</div>
<div class="contents-body">
<p>
main
</p>
<p>
1
</p>
<p>
2
</p>
<p>
3
</p>
<p>
4
</p>
<p>
5
</p>
<p>
6
</p>
<p>
7
</p>
<p>
8
</p>
<p>
9
</p>
<p>
10
</p>
<p>
11
</p>
<p>
12
</p>
<p>
13
</p>
<p>
14
</p>
<p>
15
</p>
<p>
16
</p>
<p>
17
</p>
<p>
18
</p>
<p>
19
</p>
<p>
20
</p>
<p>
21
</p>
<p>
22
</p>
<p>
23
</p>
<p>
24
</p>
<p>
25
</p>
<p>
26
</p>
<p>
27
</p>
<p>
28
</p>
<p>
29
</p>
<p>
30
</p>
<p>
31
</p>
<p>
32
</p>
<p>
33
</p>
<p>
34
</p>
<p>
35
</p>
<p>
36
</p>
<p>
37
</p>
<p>
38
</p>
<p>
39
</p>
<p>
40
</p>
<p>
41
</p>
<p>
42
</p>
</div>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment