CSS

adplus-dvertising
Working With CSS Bottom Frame Layout
Previous Home Next

Following example will show how to make bottom frame layout in CSS-

<html>
<head>
<title>CSS Bottom Frame Layout</title>
<style type="text/css">

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}

#framecontent{
position: absolute; 
bottom: 0; 
left: 0; 
width: 100%; 
height: 130px; 
overflow: hidden; 
background: navy;
color: white;
}

#maincontent{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 130px; 
overflow: auto; 
background: #fff;
}

.innertube{
margin: 15px; 
}

* html body{ 
padding: 0 0 130px 0; 
}

* html #maincontent{ 
height: 100%; 
width: 100%; 
}
</style>

</head>
<body>
<div id="framecontent">
<div class="innertube">
<h1>CSS Bottom Frame Layout</h1>
<h3>Sample text here</h3>
</div>
</div>
<div id="maincontent">
<div class="innertube">
<p style="text-align: center"
>Credits: <a href="http://www.r4r.co.in"
>R4R CSS Tutorials</a></p>
</div>
</div>
</body>
</html>

output

Previous Home Next