CODEWITHSUNDEEP
csshtml
Johnny Darvall
Johnny Darvall

Reputation: 584

Dynamic Window Size with DIV proportional to second DIV

I have a window that can be resized. Within: there is a div that must change size as the window changes. There is an OK bar of height whatever content inside that must always appear at the bottom. Note that content for these 2 can be changed at any time. Please no javascript solutions.

<html style=height:100%> 
<body style=height:100%;overflow:hidden> 
<div id=edit_area style=height:80%;overflow-y:auto>Unknown content and height</div>
<div id=ok_bar style=height:100px>Unknown content and height</div>
</body>
</html>

Despite what some say - a table was an EASY solution for this before html5 >:

Upvotes: 0

Views: 54

Answers (2)

Paulo Roberto Rosa
Paulo Roberto Rosa

Reputation: 3285

Please, as i said, do not use inline style.

CSS File:

html{
  height:100%;
}

body{
  height:100%;
  overflow:hidden;
}
div#edit_area{
  height:80%;
  overflow-y:auto;
}
div#ok_bar{
  height:20%;
  position:relative;
  bottom:0px;
}

HTML:

<html> 
<body> 
<div id=edit_area>Unknown content and height</div>
<div id=ok_bar>Unknown content and height</div>
</body>
</html>

Upvotes: 1

Johnny Darvall
Johnny Darvall

Reputation: 584

This worked using a table:

    <style>html,body{height:100%}</style>
    <body style=padding:0;overflow:hidden>
    <table style=width:100%;height:100%>
    <tr><td style=padding:0>
<div style='height:100%;overflow:auto;padding:20px' contentEditable></div>
</td></tr>
    <tr><td style=height:10px;padding:8px><input type=button value=OK></td></tr>
    </table>
    </body></html>

Upvotes: 0

Related Questions