Live Chat Icon For mobile
Live Chat Icon

How to resize two <div> tags on a webform

Platform: ASP.NET| Category: Client Side Scripting

<script>
function ResizeDivs() 
{ 
var DivTop = document.getElementById(’Top’) 
var DivBottom = document.getElementById(’Bottom’) 
var BodyHeight = 0; 

var DivTopHeight = 0; 
var DivBottomHeight = 0; 
var DivBottomPosition = 0; 

BodyHeight = document.body.clientHeight; 
DivBottomHeight = DivBottom.clientHeight; 
DivBottom.style.top = BodyHeight - DivBottomHeight; 
DivTop.style.height = DivBottom.style.top; 

} 

window.onload = ResizeDivs; 
window.onresize = ResizeDivs;</script>

<div id='Top' style='position:absolute; top:0px; left:0px; background-color:#c0c0c0; overflow:auto; width:100%'>
Top Div Text: 

Syncfusion  

Sample code 

To  

autosize 

<div> 

tag 
 
</div>
<div id='Bottom' style='position:absolute; background-color:#808080; width:100%'>
Bottom Div Text: 

 Footer for the page 

 Line1 

 Line2
</div>

Note : if the DIV has no borders, clientHeight works. If you are going to be using a border or margins, then use offsetHeight

Share with

Related FAQs

Couldn't find the FAQs you're looking for?

Please submit your question and answer.