Is it possible to make a none table based layout that allows #bottom element to fill 100% of the remaining space left in the parent element without the use of JavaScript?
Here is what works when using tables:
<html>
<head>
<style>
table{
height: 100%;
width: 100%;
}
#top{
background-color: blue;
height: 200px;
}
#bottom{
background-color: red;
height: 100%;
}
</style>
</head>
<body>
<table>
<tbody>
<tr id="top">
<td></td>
</tr>
<tr id="bottom">
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
From stackoverflow
-
<html> <head> <style> * { padding: 0px; margin: 0px; } body { height: 100%; } #main { height: 100%; width: 100%; position: relative; } #top{ background-color: blue; height: 200px; } #bottom{ background-color: red; position: absolute; bottom: 0px; top: 200px; left: 0px; right: 0px; } </style> </head> <body> <div id="main"> <div id="top"> </div> <div id="bottom"> </div> </div> </body> </html>You don't really need #main, I just like to keep my stuff contained unnecessarily.
0 comments:
Post a Comment