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

Share on twitter
Share on facebook
Share on linkedin

Related FAQs

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

Please submit your question and answer.