<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}
html, body {
width: 100%;
height: 100%;
}
#cont {
background: pink;
width: 500px;
height: 94.6%;
margin: 0 auto;
border-width: 1px 1px 0 1px;
border-color: red red transparent red;
border-style: solid solid none solid;
}
#cont #div1 {
width: 500px;
height: 5%;
background: yellow;
border-bottom: 1px solid red;
}
#cont #div2 {
background: pink;
height: 88%;
overflow-x: auto;
padding: 4% 20px;
}
#footer {
width: 500px;
height: 5%;
background: orange;
margin: 0 auto;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="cont">
<div id="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus</div>
<div id="div2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus eget justo pulvinar at auctor purus tempor. Praesent tempor facilisis commodo.
</div>
</div>
<div id="footer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque purus</div>
</body>
</html>