Resize DIV to fit parent and have scroolbar, using CSS

**CVMichael** · Oct 2nd, 2019, 04:48 PM

I'm working on a ASP.NET app, but the issue is mainly with CSS

I have a table with 2 cells, and I want to have a scrollbar in he second cell

Something like:

Code:

<Table>
<tr>
   <td>
      1<br />
      2<br />
      3<br />
   </td>
   <td style="height: 100%; width: 400px;">
       <div style="overflow: auto;">
          1<br />
          2<br />
          3<br />
          4<br />
          5<br />
          6<br />
          7<br />
          8<br />
          9<br />
          10<br />
          11<br />
          12<br />
       </div>
   </td>
</tr>
</Table>

So I want the second cell to have the height of the first cell (the 3 items), and have a scrollbar to scroll up/down the 12 items.

I can't set a fixed height because the size of the first cell changes depending on content inside.

**sapator** · Oct 3rd, 2019, 09:46 AM

If I understood correctly.
Something like this?

Code:

<Table width = "400" >
<tr>
   <td style="height: 100%; width: 50px;">
      1<br />
      2<br />
      3<br />
   </td>
   <td>
       <div style="width:100%; max-height:50px; overflow-y: scroll">
          1<br />
          2<br />
          3<br />
          4<br />
          5<br />
          6<br />
          7<br />
          8<br />
          9<br />
          10<br />
          11<br />
          12<br />
      </div>
   </td>
</tr>
</Table>

But note sure how you get the %height compared to the first cell height.
Could be done with JS probably, else I have to look this up.

**sapator** · Oct 3rd, 2019, 04:24 PM

Back home.
So I've set some JS that will maintain the second cell- div equal to the 1st cellheight.

Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>   
    <script>
function script(){
var tblId=document.getElementById('x');
var tblz=document.getElementById('z');  

// This will get whatever height 1st cell has and put it on the second cell
tblz.setAttribute("style","width:100%;overflow-y: scroll;max-height: " + tblId.offsetHeight + "px;");


};
</script>
  </head>
  <body onload="script();">
   <Table width = "400" >
<tr>
   <td id='x' style="height: 100%;">
      1<br />
      2<br />
      3<br />
      4<br />
   </td>
   <td>   
<div id='z' style="width:100%; max-height:5px; overflow-y: scroll">   
          1<br />
          2<br />
          3<br />
          4<br />
          5<br />
          6<br />
          7<br />
          8<br />
          9<br />
          10<br />
          11<br />
          12<br />     
</div>
   </td>

</tr>
</Table>

  </body>
</html>

**NeedSomeAnswers** · Oct 4th, 2019, 03:25 AM

Can i ask why your still using tables in 2019? there are far better ways to layout stuff in web pages

**sapator** · Oct 4th, 2019, 04:19 AM

Tables can center-align your items very easily or quick sum, so I wouldn't extricate them right away.

**CVMichael** · Oct 4th, 2019, 10:14 AM

Originally Posted by sapator

Back home.
So I've set some JS that will maintain the second cell- div equal to the 1st cellheight.
…...

After A LOT of googling, and a lot of trial & error, I ended up writing my own JavaScript that modifies the Width & Height on window resize:

Code:

<script type='text/javascript'>
    function resizedw() {
        var elements = document.getElementsByClassName("div_ctrl_Comments");

        for (var i = 0; i < elements.length; i++) {
            var inner_element = elements[i].getElementsByClassName("div_ctrl_Comments_inner")[0];
            var cs = window.getComputedStyle(elements[i].parentElement, null);

            elementHeight = elements[i].parentElement.clientHeight;
            elementWidth = elements[i].parentElement.clientWidth;

            elementHeight -= parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
            elementWidth -= parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);

            inner_element.style.maxHeight = elementHeight + "px";
            elements[i].style.height = elementHeight + "px";
            elements[i].style.width = elementWidth + "px";
        }
    }

    var doit;
    window.onresize = function () {
        clearTimeout(doit);
        doit = setTimeout(resizedw, 100);
    };
</script>

<Table>
<tr>
   <td>
      1<br />
      2<br />
      3<br />
   </td>
   <td style="width: 400px; vertical-align: top; padding: 5px 5px 5px 10px;">
<div style="position: absolute; height: 100%;" class="div_ctrl_Comments">
    <div style="position: relative; max-height: 300px; overflow: auto; border: thin solid gray;" class="div_ctrl_Comments_inner">
          1<br />
          2<br />
          3<br />
          4<br />
          5<br />
          6<br />
          7<br />
          8<br />
          9<br />
          10<br />
          11<br />
          12<br />
    </div>
</div>
   </td>
</tr>
</Table>

    <script type='text/javascript'>
        resizedw(); // resize controls for page load
    </script>

So basically I set the parent div position absolute, and I change width & height through JavaScript, and the max-height in the inner div.
The DIVs are actually in a user control, and I am using the control 25 times in the page, so that's why it's looping...

**CVMichael** · Oct 4th, 2019, 10:25 AM

Originally Posted by NeedSomeAnswers

Can i ask why your still using tables in 2019? there are far better ways to layout stuff in web pages

Can I ask why we're still using VB6 in 2019 ? (but let's not go there)

I got used to it! I use them because I need thigs aligned on the page, and I didn't find good examples of these "better ways" you are talking about, can you give me some examples?

**CVMichael** · Oct 4th, 2019, 10:59 AM

Originally Posted by NeedSomeAnswers

Can i ask why your still using tables in 2019? there are far better ways to layout stuff in web pages

I found an interesting discussion here:
https://softwareengineering.stackexc...bles-with-divs

I'll consider using DIVs in my next app

**NeedSomeAnswers** · Oct 7th, 2019, 03:15 AM

I got used to it! I use them because I need things aligned on the page, and I didn't find good examples of these "better ways" you are talking about, can you give me some examples?

Sure i was really curious not a trick question or anything, tables are just a bit of a dated way to do a layout and dont work particularly well, also they dont really work responsively.

Divs and Flexbox are how people tend to do page layouts on web page today (along with Bootstrap)

w3schools do a pretty good job of explaining how to use Flexbox - https://www.w3schools.com/css/css3_flexbox.asp

Thread: Resize DIV to fit parent and have scroolbar, using CSS

Thread Tools

Display

Resize DIV to fit parent and have scroolbar, using CSS

Re: Resize DIV to fit parent and have scroolbar, using CSS

Re: Resize DIV to fit parent and have scroolbar, using CSS

Re: Resize DIV to fit parent and have scroolbar, using CSS

Re: Resize DIV to fit parent and have scroolbar, using CSS

Re: Resize DIV to fit parent and have scroolbar, using CSS

Re: Resize DIV to fit parent and have scroolbar, using CSS

Re: Resize DIV to fit parent and have scroolbar, using CSS

Re: Resize DIV to fit parent and have scroolbar, using CSS

Posting Permissions