Full page app

Example full page application

by infiniteloops

HTML

<div class="header row">
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
    <li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
<div class="body row scroll-y">
Consectetur ut ribeye, qui anim prosciutto do in bacon in. Voluptate culpa ground round shank sunt, eiusmod aliquip fugiat ea commodo reprehenderit. Officia bacon salami, tri-tip fugiat leberkas laboris eu pork loin chuck flank strip steak. Dolor capicola tempor, exercitation adipisicing tongue dolore ad labore eiusmod consequat frankfurter ham hock. Ham hock ribeye t-bone strip steak, nostrud swine bresaola pork biltong filet mignon tenderloin beef ribs chuck tail tongue.

Pork proident bresaola, frankfurter sausage ribeye qui tenderloin venison minim short ribs. Jerky velit eiusmod, turkey elit voluptate corned beef tail ut cillum fatback swine excepteur qui sunt. Venison bacon frankfurter shank, ad swine ut pork loin dolore short loin labore aliquip ea aliqua. Labore prosciutto excepteur duis anim meatball. Minim deserunt exercitation ullamco aliquip, chicken swine eiusmod pork chop shank turkey adipisicing occaecat. Nostrud rump deserunt pork, cillum aute incididunt short loin eiusmod nisi duis ut sint quis.

Kielbasa proident strip steak boudin. Ham hock turkey bacon, aliquip pork chop laboris chicken cupidatat. Tail dolore occaecat, mollit deserunt elit sunt ex enim meatloaf t-bone fugiat prosciutto ut. Pork chop chicken shoulder excepteur. T-bone turducken sunt, short loin consectetur magna brisket pork chop strip steak bacon shank ullamco. Est tail filet mignon fugiat, jowl labore cillum consequat frankfurter andouille t-bone nisi ea dolor.

Veniam sirloin brisket sint short ribs. Spare ribs duis labore, drumstick adipisicing velit do. Occaecat qui magna consequat. Tempor eu rump enim adipisicing. Consectetur corned beef pork drumstick adipisicing, pig deserunt ex esse sed cillum commodo est laboris. Aliquip turducken velit, cillum laborum ham anim fugiat sirloin jerky...

CSS

body { margin: 0 }
.row, .col { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }
.header.row { height: 50px; top: 0; }
.body.row { top: 50px; bottom: 50px; }
.footer.row { height: 50px; bottom: 0; }

.list{
    list-style-type: none;
}

.list LI{
    display: inline;
}