Skip to content

Instantly share code, notes, and snippets.

@mattanja

mattanja/100percent-height-test.html

Last active December 7, 2015 16:51
Show Gist options
  • Save mattanja/a53ccfefbcc2c0844832 to your computer and use it in GitHub Desktop.
Save mattanja/a53ccfefbcc2c0844832 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
100percent-height-test.html
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<style>
/*
$color1: #aa0000; //rgba(170, 0, 0, 100)
$color2: #faa916; //rgba(250, 169, 22, 100)
$color3: #fbfffe; //rgba(251, 255, 254, 100)
$color4: #6d676e; //rgba(109, 103, 110, 100)
$color5: #1b1b1e; //rgba(27, 27, 30, 100)
*/
html {
height: 100%;
margin: 0;
padding: 0;
background-color: #ffffff;
}
body {
height: 100%;
overflow: hidden; /* scrolling and height settings must be taken care of inside of the page body */
/* margin and padding and content spacing taken care of by bootstrap */
background-color: #1b1b1e;
color: #ffffff;
}
.main {
height: 100%;
}
.header {
height: 100px;
overflow: hidden; /* overflow will destroy entire page layout */
background-color: #aa0000;
}
.header h1 small {
color: #fff;
}
.footer {
position: fixed;
height: 50px;
bottom: 0;
width: 100%;
background-color: #1b1b1e;
}
.page {
height: 100%;
padding-bottom: 150px; /* subtracting header from height, only pixel correct without borders */
background-color: #6d676e;
/*border: 3px solid #ff0000;*/
}
.scroll-container {
height: 100%;
overflow: auto;
}
.page-inner {
height: 100%;
}
.first-row {
height: 50%;
overflow: auto;
background-color: #fbfffe;
color: #333;
/*border: 3px solid #ffcc00;*/
}
.second-row {
height: 50%;
overflow: auto;
background-color: #faa916;
color: #fff;
/*border: 3px solid #aa0000;*/
}
</style>
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid main">
<div class="row header">
<div class="col-md-12">
<h1>
CSS height + scrolling is hard (Header 100px)
<small>...even without responsive layouts</small>
</h1>
</div>
</div>
<div class="row page">
<div class="col-md-12 page-inner">
<div class="row first-row">
<div class="col-xs-6 scroll-container">
<h2>col-xs-6 with 50% height + scrolling</h2>
<ul>
<li>1 Overflow scrolling handled inside inner container</li>
<li>2 Overflow scrolling handled inside inner container</li>
<li>3 Overflow scrolling handled inside inner container</li>
<li>4 Overflow scrolling handled inside inner container</li>
<li>5 Overflow scrolling handled inside inner container</li>
<li>6 Overflow scrolling handled inside inner container</li>
<li>7 Overflow scrolling handled inside inner container</li>
<li>8 Overflow scrolling handled inside inner container</li>
<li>9 Overflow scrolling handled inside inner container</li>
<li>10 Overflow scrolling handled inside inner container</li>
<li>11 Overflow scrolling handled inside inner container</li>
<li>12 Overflow scrolling handled inside inner container</li>
<li>13 Overflow scrolling handled inside inner container</li>
<li>14 Overflow scrolling handled inside inner container</li>
<li>15 Overflow scrolling handled inside inner container</li>
<li>16 Overflow scrolling handled inside inner container</li>
<li>17 Overflow scrolling handled inside inner container</li>
<li>18 Overflow scrolling handled inside inner container</li>
<li>19 Overflow scrolling handled inside inner container</li>
<li>20 Overflow scrolling handled inside inner container</li>
<li>21 Overflow scrolling handled inside inner container</li>
<li>22 Overflow scrolling handled inside inner container</li>
<li>23 Overflow scrolling handled inside inner container</li>
<li>24 Overflow scrolling handled inside inner container</li>
<li>25 Overflow scrolling handled inside inner container</li>
<li>26 Overflow scrolling handled inside inner container</li>
<li>27 Overflow scrolling handled inside inner container</li>
<li>28 Overflow scrolling handled inside inner container</li>
<li>29 Overflow scrolling handled inside inner container</li>
<li>30 Overflow scrolling handled inside inner container</li>
<li>31 Overflow scrolling handled inside inner container</li>
<li>32 Overflow scrolling handled inside inner container</li>
<li>33 Overflow scrolling handled inside inner container</li>
<li>34 Overflow scrolling handled inside inner container</li>
<li>35 Overflow scrolling handled inside inner container</li>
<li>36 Overflow scrolling handled inside inner container</li>
<li>37 Overflow scrolling handled inside inner container</li>
<li>38 Overflow scrolling handled inside inner container</li>
<li>39 Overflow scrolling handled inside inner container</li>
<li>40 Overflow scrolling handled inside inner container</li>
<li>41 Overflow scrolling handled inside inner container</li>
<li>42 Overflow scrolling handled inside inner container</li>
<li>43 Overflow scrolling handled inside inner container</li>
<li>44 Overflow scrolling handled inside inner container</li>
<li>45 Overflow scrolling handled inside inner container</li>
<li>46 Overflow scrolling handled inside inner container</li>
<li>47 Overflow scrolling handled inside inner container</li>
<li>48 Overflow scrolling handled inside inner container</li>
<li>49 Overflow scrolling handled inside inner container</li>
<li>50 Overflow scrolling handled inside inner container</li>
<li>51 Overflow scrolling handled inside inner container</li>
<li>52 Overflow scrolling handled inside inner container</li>
<li>53 Overflow scrolling handled inside inner container</li>
<li>54 Overflow scrolling handled inside inner container</li>
<li>55 Overflow scrolling handled inside inner container</li>
</ul>
</div>
<div class="col-xs-6 scroll-container">
<h2>col-xs-6 with 50% height + scrolling</h2>
<ul>
<li>1 Overflow scrolling handled inside inner container</li>
<li>2 Overflow scrolling handled inside inner container</li>
<li>3 Overflow scrolling handled inside inner container</li>
<li>4 Overflow scrolling handled inside inner container</li>
<li>5 Overflow scrolling handled inside inner container</li>
<li>6 Overflow scrolling handled inside inner container</li>
<li>7 Overflow scrolling handled inside inner container</li>
<li>8 Overflow scrolling handled inside inner container</li>
<li>9 Overflow scrolling handled inside inner container</li>
<li>10 Overflow scrolling handled inside inner container</li>
<li>11 Overflow scrolling handled inside inner container</li>
<li>12 Overflow scrolling handled inside inner container</li>
<li>13 Overflow scrolling handled inside inner container</li>
<li>14 Overflow scrolling handled inside inner container</li>
<li>15 Overflow scrolling handled inside inner container</li>
<li>16 Overflow scrolling handled inside inner container</li>
<li>17 Overflow scrolling handled inside inner container</li>
<li>18 Overflow scrolling handled inside inner container</li>
<li>19 Overflow scrolling handled inside inner container</li>
<li>20 Overflow scrolling handled inside inner container</li>
<li>21 Overflow scrolling handled inside inner container</li>
<li>22 Overflow scrolling handled inside inner container</li>
<li>23 Overflow scrolling handled inside inner container</li>
<li>24 Overflow scrolling handled inside inner container</li>
<li>25 Overflow scrolling handled inside inner container</li>
<li>26 Overflow scrolling handled inside inner container</li>
<li>27 Overflow scrolling handled inside inner container</li>
<li>28 Overflow scrolling handled inside inner container</li>
<li>29 Overflow scrolling handled inside inner container</li>
<li>30 Overflow scrolling handled inside inner container</li>
<li>31 Overflow scrolling handled inside inner container</li>
<li>32 Overflow scrolling handled inside inner container</li>
<li>33 Overflow scrolling handled inside inner container</li>
<li>34 Overflow scrolling handled inside inner container</li>
<li>35 Overflow scrolling handled inside inner container</li>
<li>36 Overflow scrolling handled inside inner container</li>
<li>37 Overflow scrolling handled inside inner container</li>
<li>38 Overflow scrolling handled inside inner container</li>
<li>39 Overflow scrolling handled inside inner container</li>
<li>40 Overflow scrolling handled inside inner container</li>
<li>41 Overflow scrolling handled inside inner container</li>
<li>42 Overflow scrolling handled inside inner container</li>
<li>43 Overflow scrolling handled inside inner container</li>
<li>44 Overflow scrolling handled inside inner container</li>
<li>45 Overflow scrolling handled inside inner container</li>
<li>46 Overflow scrolling handled inside inner container</li>
<li>47 Overflow scrolling handled inside inner container</li>
<li>48 Overflow scrolling handled inside inner container</li>
<li>49 Overflow scrolling handled inside inner container</li>
<li>50 Overflow scrolling handled inside inner container</li>
<li>51 Overflow scrolling handled inside inner container</li>
<li>52 Overflow scrolling handled inside inner container</li>
<li>53 Overflow scrolling handled inside inner container</li>
<li>54 Overflow scrolling handled inside inner container</li>
<li>55 Overflow scrolling handled inside inner container</li>
</ul>
</div>
</div>
<div class="row second-row">
<div class="col-xs-6 scroll-container">
<h1>Test 50% of inner space</h1>
<ul>
<li>1 Overflow scrolling handled inside inner container</li>
<li>2 Overflow scrolling handled inside inner container</li>
<li>3 Overflow scrolling handled inside inner container</li>
<li>4 Overflow scrolling handled inside inner container</li>
<li>5 Overflow scrolling handled inside inner container</li>
<li>6 Overflow scrolling handled inside inner container</li>
<li>7 Overflow scrolling handled inside inner container</li>
<li>8 Overflow scrolling handled inside inner container</li>
<li>9 Overflow scrolling handled inside inner container</li>
<li>10 Overflow scrolling handled inside inner container</li>
<li>11 Overflow scrolling handled inside inner container</li>
<li>12 Overflow scrolling handled inside inner container</li>
<li>13 Overflow scrolling handled inside inner container</li>
<li>14 Overflow scrolling handled inside inner container</li>
<li>15 Overflow scrolling handled inside inner container</li>
<li>16 Overflow scrolling handled inside inner container</li>
<li>17 Overflow scrolling handled inside inner container</li>
<li>18 Overflow scrolling handled inside inner container</li>
<li>19 Overflow scrolling handled inside inner container</li>
<li>20 Overflow scrolling handled inside inner container</li>
<li>21 Overflow scrolling handled inside inner container</li>
<li>22 Overflow scrolling handled inside inner container</li>
<li>23 Overflow scrolling handled inside inner container</li>
<li>24 Overflow scrolling handled inside inner container</li>
<li>25 Overflow scrolling handled inside inner container</li>
</ul>
</div>
<div class="col-xs-6 scroll-container">
<h2>col-xs-6 with 50% height + scrolling</h2>
<ul>
<li>26 Overflow scrolling handled inside inner container</li>
<li>27 Overflow scrolling handled inside inner container</li>
<li>28 Overflow scrolling handled inside inner container</li>
<li>29 Overflow scrolling handled inside inner container</li>
<li>30 Overflow scrolling handled inside inner container</li>
<li>31 Overflow scrolling handled inside inner container</li>
<li>32 Overflow scrolling handled inside inner container</li>
<li>33 Overflow scrolling handled inside inner container</li>
<li>34 Overflow scrolling handled inside inner container</li>
<li>35 Overflow scrolling handled inside inner container</li>
<li>36 Overflow scrolling handled inside inner container</li>
<li>37 Overflow scrolling handled inside inner container</li>
<li>38 Overflow scrolling handled inside inner container</li>
<li>39 Overflow scrolling handled inside inner container</li>
<li>40 Overflow scrolling handled inside inner container</li>
<li>41 Overflow scrolling handled inside inner container</li>
<li>42 Overflow scrolling handled inside inner container</li>
<li>43 Overflow scrolling handled inside inner container</li>
<li>44 Overflow scrolling handled inside inner container</li>
<li>45 Overflow scrolling handled inside inner container</li>
<li>46 Overflow scrolling handled inside inner container</li>
<li>47 Overflow scrolling handled inside inner container</li>
<li>48 Overflow scrolling handled inside inner container</li>
<li>49 Overflow scrolling handled inside inner container</li>
<li>50 Overflow scrolling handled inside inner container</li>
<li>51 Overflow scrolling handled inside inner container</li>
<li>52 Overflow scrolling handled inside inner container</li>
<li>53 Overflow scrolling handled inside inner container</li>
<li>54 Overflow scrolling handled inside inner container</li>
<li>55 Overflow scrolling handled inside inner container</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row footer">
<div class="col-md-12">
Footer 50px
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment