是否可以通过设置尺寸百分比的元素来显示滚动条，而不是增加自身的尺寸？

Kosmos 发表于 Dev

宇宙

例如，我有尺寸的元件容器width: 100%;和height: 100%;与overflow: auto;

当我在其中添加更多元素时，这些元素对于容器来说太大了，它增加了自己的面积以适合这些元素，而不是显示滚动条。

有什么解决办法吗？

例子：

<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>

好的，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>

盖扎萨

这就是你要找的

TD不能滚动，但是您可以在其中滚动一个div。

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>

编辑

我也用jQuery完成了

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>