Reputation: 4151

Is is possible to make element with % set dimensions to show scrolls, instead of increasing own size?

For example, I have an element-container with dimensions width: 100%; and height: 100%; and overflow: auto;

When I adding inside it more elements, so those becomes too big for container, it increases own area to fit those, instead of showing scrolls.

Is there any solution for this?

Example:

<html style = 'height: 100%;'>
    <head>
        <title>test scrolls</title>
    </head>
    <body style = 'height: 100%;'>
        <table border = '1' style = 'width: 100%; height: 100%;'>
            <tr><td id = "test_td" height = '50%' style = 'overflow: scroll;'></td></tr>
            <tr><td height = '50%'><input type = "button" value = "add a lto of junk in first td" onclick = "document.getElementById('test_td').innerHTML = 'asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />'" /></td></tr>
        </table>
    </body>
</html>

Ok, another example with div:

<html style = 'height: 100%;'>
    <head>
        <title>test scrolls</title>
    </head>
    <body style = 'height: 100%;'>
        <table border = '1' style = 'width: 100%; height: 100%;'>
            <tr><td height = '50%'><div id = "test_div" style = 'width: 100%; height: 100%; overflow: scroll;'></div></td></tr>
            <tr><td height = '50%'><input type = "button" value = "add a lot of junk in div in first td" onclick = "document.getElementById('test_div').innerHTML = 'asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />'" /></td></tr>
        </table>
    </body>
</html>

Upvotes: 2

Answers (3)

Bojan Petkovski

Reputation: 6933

Here is an example: http://jsfiddle.net/83akmom1/

You need to set the height of the parent of the div you are setting to height: 100%; and it will work

*{
  margin: 0px;
}
body {
  height: 100%;
}
.wrap{
  width: 100%; 
  height: 100%; 
  overflow: auto;
}

Upvotes: 1

Kosmo零

Reputation: 4151

<html style = 'height: 100%;'>
    <head>
        <title>test scrolls</title>

        <script type = "text/JavaScript">
            function endsWith(str, suffix)
            {
                if (!str)
                    return false;

                return str.indexOf(suffix, str.length - suffix.length) >= 0;
            }

            function fixDimensionsRecursiveIn(start_elem)
            {
                if (!document || !document.body)
                    return;

                var curr_elem = start_elem ? start_elem : document.body;

                var pos = curr_elem.style.position || curr_elem.style.getAttribute("position");

                if (pos == "absolute")
                {
                    var curr_w = curr_elem.width || curr_elem.style.width;
                    var curr_h = curr_elem.height || curr_elem.style.height;
                    var parent_w = curr_elem.parentNode.clientWidth || curr_elem.parentNode.offsetWidth;
                    var parent_h = curr_elem.parentNode.clientHeight || curr_elem.parentNode.offsetHeight;

                    var w_fixed = false;
                    var h_fixed = false;

                    if (endsWith(curr_w, "%") && parent_w > 0)
                    {
                        curr_elem.original_width = curr_w;
                        curr_w = curr_w.substr(0, curr_w.length - 1);
                        curr_elem.style.width = ((curr_w * parent_w) / 100) + "px";

                        w_fixed = true;
                    }

                    if (endsWith(curr_h, "%") && parent_h > 0)
                    {
                        curr_elem.original_height = curr_h;
                        curr_h = curr_h.substr(0, curr_h.length - 1);
                        curr_elem.style.height = ((curr_h * parent_h) / 100) + "px";

                        h_fixed = true;
                    }

                    var possible_original_width = curr_elem.original_width;
                    var possible_original_height = curr_elem.original_height;

                    if (!w_fixed && endsWith(possible_original_width, "%") && parent_w > 0)
                    {
                        possible_original_width = possible_original_width.substr(0, possible_original_width.length - 1);
                        curr_elem.style.width = ((possible_original_width * parent_w) / 100) + "px";
                    }

                    if (!h_fixed && endsWith(possible_original_height, "%") && parent_h > 0)
                    {
                        possible_original_height = possible_original_height.substr(0, possible_original_height.length - 1);
                        curr_elem.style.height = ((possible_original_height * parent_h) / 100) + "px";
                    }
                }

                for (var i = 0; i < curr_elem.children.length; i++)
                    fixDimensionsRecursiveIn(curr_elem.children[i]);
            }

            setInterval(fixDimensionsRecursiveIn, 500);
        </script>
    </head>
    <body style = 'height: 100%;'>
        <table border = '1' style = 'width: 100%; height: 100%;'>
            <tr><td height = '50%' style = 'position: relative;'><div id = "test_div" style = 'border: dashed; margin: 0px; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; overflow: scroll;'></div></td></tr>
            <tr><td height = '50%'><input type = "button" value = "add a lot of junk in div in first td" onclick = "document.getElementById('test_div').innerHTML = 'asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />'" /></td></tr>
        </table>
    </body>
</html>

This is my own solution, but I hope to get some better solution in future.

Or that way by double div, based on Gezzasa's solution:

<html style = 'height: 100%;'>
    <head>
        <title>test scrolls</title>
    </head>
    <body style = 'height: 100%;'>
        <table border = '1' style = 'width: 100%; height: 100%;'>
            <tr>
                <td height = '50%'>
                <div  style = "border: solid; position: relative; width: 100%; height: 100%;">
                    <div id = "test_div" style = 'border: dashed; position: absolute; top: 0px; left: 0px; bottom: 0%; width: 100%; overflow: scroll;'></div>
                </div>
                </td>
            </tr>
            <tr>
                <td height = '50%'>
                    <input type = "button" value = "add a lot of junk in div in first td" onclick = "document.getElementById('test_div').innerHTML = 'asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />'" />
                </td>
            </tr>
        </table>
    </body>
</html>

Upvotes: 0

Gezzasa

Reputation: 1453

This is what you are looking for

TD's can not scroll, but you can have a div inside that does scroll.

http://jsfiddle.net/b9kzbf8c/1/

div.scrollable {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
}

<table border = '1' style = 'width: 100%; height: 100%;'>
    <tr style="height: 40px; overflow-y: scroll;">
        <td>
            <div class=scrollable>Some content with a scrollbar if it's too big for the cell
                Some content with a scrollbar if it's too big for the cell
                Some content with a scrollbar if it's too big for the cell
            </div>
        </td>
    <table>

EDIT

I have done it with jQuery too

http://jsfiddle.net/pwcd9cxe/2/

<script type="text/javascript">
    var equalHeights;

    resize = function(me){
        equalHeights = me;
        $('.td').height(($(equalHeights).height())/2);
    };

    $(window).resize(function(){
        $('.td').height(($(equalHeights).height())/2);
    });

    resize($(window));
</script>

<style>
    .td {overflow-y: scroll;}
</style>

<div class="td">
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
</div>
</div>
<div class="tr">
<div class="td">
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
    Some content here that is copy pasted to fill up space. <br />
</div>

EDIT

I have managed to do it without any JS.

http://jsfiddle.net/pwcd9cxe/3/

Upvotes: 1

Is is possible to make element with % set dimensions to show scrolls, instead of increasing own size?

Answers (3)

Related Questions