I need a div to adjust its width and height dynamically based on the browser dimensions when a user resizes their browser window.
Implemented code following the provided suggestions:
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="/favicon.ico">
<meta charset='UTF-8'>
<%= stylesheet_link_tag 'application' %>
<title>Some Company - Terms and Conditions</title>
</head>
<body >
<div>
Links to content within the div below can go here.
</div>
<div style="position: absolute; top: 100; bottom: 0; left: 0; right: 0;overflow:auto;padding:10px;border:1px solid lightblue;">
Content goes here
</div>
</body>
The final outcome looked like this:
<!DOCTYPE html>
<html>
<head><title>Terms and Conditions</title></head>
<body>
<a href="#tac20">Terms and Conditions 20</a> | <a href="#tac40">Terms and Conditions 40</a>
<div style="position:absolute; top: 30px; bottom: 0; left: 0; right: 0;overflow-y:auto;padding:5px;border-top:1px solid lightblue;">
Terms and Condition 1 <br/>
Terms and Condition 2 <br/>
Terms and Condition 3 <br/>
Terms and Condition 4 <br/>
Terms and Condition 5 <br/>
Terms and Condition 6 <br/>
Terms and Condition 7 <br/>
Terms and Condition 8 <br/>
Terms and Condition 9 <br/>
Terms and Condition 10 <br/>
Terms and Condition 11 <br/>
Terms and Condition 12 <br/>
Terms and Condition 13 <br/>
Terms and Condition 14 <br/>
Terms and Condition 15 <br/>
Terms and Condition 16 <br/>
Terms and Condition 17 <br/>
Terms and Condition 18 <br/>
Terms and Condition 19 <br/>
<a name="tac20">Terms and Condition 20</name> <br/>
Terms and Condition 21 <br/>
Terms and Condition 22 <br/>
Terms and Condition 23 <br/>
Terms and Condition 24 <br/>
Terms and Condition 25 <br/>
Terms and Condition 26 <br/>
Terms and Condition 27 <br/>
Terms and Condition 28 <br/>
Terms and Condition 29 <br/>
Terms and Condition 30 <br/>
Terms and Condition 31 <br/>
Terms and Condition 32 <br/>
Terms and Condition 33 <br/>
Terms and Condition 34 <br/>
Terms and Condition 35 <br/>
Terms and Condition 36 <br/>
Terms and Condition 37 <br/>
Terms and Condition 38 <br/>
Terms and Condition 39 <br/>
<a name="tac40">Terms and Condition 40</name> <br/>
</div>
</body>