0

I have a problem with CSS which I don't know how to solve for a few days now. Searched for an answer everywhere ...

this is a fiddle I created for this purpose:
https://jsfiddle.net/tdckcxhh/8/

<body style="margin:0; background: lightgray;">
<div style="width: 400px; height: 400px; position:absolute; top: 30px; left: 30px;">
    <div style="height:100%; border: 1px solid red;">
        <div style="background:#d0d0ff" class="disclaimer">
            This is a removable message which is always different (up to 100 words)
        </div>
        <div style="background:#d0d00f; height: 25px" class="desc">
            This is content description
        </div>
        <div style="background:#d0ffd0; height: 100%">
            <div id='newdiv'>
                <div class="overflow: auto;">
                    <table class="table2">
                            <tr>
                                <td width="40%">Name</td>
                                <td width="20%">zip</td>
                                <td>Address</td>
                            </tr>
                            <tr>
                                <td>A very long name</td>
                                <td>12345</td>
                                <td>followed by an even longer name</td>
                            </tr>
                            <tr>
                                <td>A very long name 2</td>
                                <td>23456</td>
                                <td>followed by another name</td>
                            </tr>
                            <tr>
                                <td>A very long name</td>
                                <td>12345</td>
                                <td>followed by an even longer name</td>
                            </tr>
                            <tr>
                                <td>A very long name 2</td>
                                <td>23456</td>
                                <td>followed by another name</td>
                            </tr>
                            <tr>
                                <td>A very long name</td>
                                <td>12345</td>
                                <td>followed by an even longer name</td>
                            </tr>
                            <tr>
                                <td>A very long name 2</td>
                                <td>23456</td>
                                <td>followed by another name</td>
                            </tr>
                            <tr>
                                <td>A very long name</td>
                                <td>12345</td>
                                <td>followed by an even longer name</td>
                            </tr>
                            <tr>
                                <td>A very long name 2</td>
                                <td>23456</td>
                                <td>followed by another name</td>
                            </tr>
                            <tr>
                                <td>A very long name</td>
                                <td>12345</td>
                                <td>followed by an even longer name</td>
                            </tr>
                            <tr>
                                <td>A very long name 2</td>
                                <td>23456</td>
                                <td>followed by another name</td>
                            </tr>
                            <tr>
                                <td>A very long name 2</td>
                                <td>23456</td>
                                <td>followed by another name</td>
                            </tr>
                            <tr>
                                <td>A very long name 2</td>
                                <td>23456</td>
                                <td>followed by another name</td>
                            </tr>
                            <tr>
                                <td>A very long name 2</td>
                                <td>23456</td>
                                <td>followed by another name</td>
                            </tr>
                            <tr>
                                <td>A very long name 2</td>
                                <td>23456</td>
                                <td>followed by another name</td>
                            </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
$(document).ready(function(){

$(".disclaimer").click(function(){
    $(this).remove();
});


});
</script>

Code description:

Table length is always different. Sometimes, it is just one row, but it can go up to 500 rows. Table header is always the same.
Depending on table size, there is appropriate disclaimer - a removable message which is also always different. User removes it by clicking on it

Problem:

I need a table to be inside a div which will have an automatic height equal to what is left after disclaimer and description are placed. That div will have a scrollbar if the table is bigger than the div. When disclaimer is removed, the table div will auto expand and keep the scroll bar if needed

This has to be pure CSS solution which may have as many wrapping HTML elements as needed - it is ok as long as it looks like original and has the required functionality without using jQuery (or similar libraries)

P.S Solution with bootstrap will be perfect

EDIT: I found a solution here:
Fill remaining vertical space with CSS using display:flex
http://jsfiddle.net/7yLFL/5/

developer
  • 199
  • 2
  • 10

1 Answers1

0

Answer is here

Fill remaining vertical space with CSS using display:flex
http://jsfiddle.net/7yLFL/5/

CSS:

section {
  display: flex;
  flex-flow: column;
  height: 300px;
}
header {
  background: tomato;
}
div {
  flex: 2 ;
  background: gold;
  overflow: auto;
}
footer {
  background: lightgreen;
  min-height: 60px; 
}
developer
  • 199
  • 2
  • 10