Skip to content

Instantly share code, notes, and snippets.

@adammockor

adammockor/index.html

Last active August 29, 2015 14:03
Show Gist options
  • Save adammockor/db250dd5554805192918 to your computer and use it in GitHub Desktop.
Save adammockor/db250dd5554805192918 to your computer and use it in GitHub Desktop.
Download ZIP
Hangout chat box
Raw
index.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Hangout chat box</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>
<body>
<div class="wrap">
<div class="header-wrap">
<div class="header">
<h2>Header</h2>
</div>
</div>
<div class="content-wrap">
<div class="content">
<div class="content-cont1">
<div class="content-cont2"></div>
<div class="content-cont3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem vel nulla eos totam modi magnam sapiente sequi consectetur sit distinctio? Enim vero dignissimos officiis voluptatibus praesentium expedita totam eum a.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam tenetur saepe expedita aliquid praesentium consectetur corrupti error soluta. Reprehenderit voluptatum delectus deleniti eaque qui dolorum aut expedita suscipit nemo modi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam tenetur saepe expedita aliquid praesentium consectetur corrupti error soluta. Reprehenderit voluptatum delectus deleniti eaque qui dolorum aut expedita suscipit nemo modi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam tenetur saepe expedita aliquid praesentium consectetur corrupti error soluta. Reprehenderit voluptatum delectus deleniti eaque qui dolorum aut expedita suscipit nemo modi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam tenetur saepe expedita aliquid praesentium consectetur corrupti error soluta. Reprehenderit voluptatum delectus deleniti eaque qui dolorum aut expedita suscipit nemo modi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam tenetur saepe expedita aliquid praesentium consectetur corrupti error soluta. Reprehenderit voluptatum delectus deleniti eaque qui dolorum aut expedita suscipit nemo modi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam tenetur saepe expedita aliquid praesentium consectetur corrupti error soluta. Reprehenderit voluptatum delectus deleniti eaque qui dolorum aut expedita suscipit nemo modi.</p>
</div>
</div>
</div>
</div>
<div class="footer-wrap">
<div class="footer">
heheeeeeeeeej
ne rfresfsnkesfnesk fs fs jrg eljg sedlg dfsfkj sek sz vszdv d,jv</div>
</div>
</div>
</body>
</html>
Raw
style.css
body {
margin: 0px;
height:100%;
overflow: hidden;
}
html {
height: 100%;
}
.wrap {
display: table;
width: 100%;
height: 100%;
}
.header-wrap {
background-color: yellow;
display: table-row;
border-collapse: collapse;
}
.header {
display: table-cell;
height: 30px;
}
.content-wrap {
display: table-row;
border-collapse: collapse;
}
.content {
display: table-cell;
height: 100%;
width: 100%;
}
.content-cont1 {
height: 100%;
position: relative;
overflow-x: hidden;
}
.content-cont2 {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
overflow: hidden;
}
.content-cont3 {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
}
.footer-wrap {
display: table-row;
background-color: green;
border-collapse: collapse;
}
.footer {
display: table-cell;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment