Question

如何使DIV从其容器继承其宽度和高度而没有固定的高度和宽度，默认情况下覆盖容器内的整个区域并滚动而不是增加其高度或宽度。例如

<td style="width:400px; ">
<div style="overflow:scroll; ">
</div>
</td>

此DIV应覆盖400px，当内容超出此宽度时，它应滚动。容器可以是TD或SPAN。一种方法可能是使用一个只有定义宽度的CSS类并应用于容器和div，但是，我不知道这个DIV将在何处使用以及它的容器宽度是多少。

修改1 通过将max-width设置为100px，我得到了我想要的但是否则增加了容器的宽度。这可能是因为容器的宽度为％。看起来我需要找到容器的初始宽度，然后设置DIV的最大宽度。是吗？

编辑2 这个Div里面有一个网格。当在DIV的样式中定义最大宽度时，它反映了当通过JS设置时我需要的行为，当页面加载时宽度是正常但是当单击链接以在网格内加载数据时它会丢失最大宽度属性。

<script type="text/javascript">
    var w = document.getElementById("divgrid").style.maxWidth;
    if (w == null || w == NaN || w <= 0 || w.toString() == '')
    w = document.getElementById("divgrid").offsetWidth;
    document.getElementById('divgrid').style.maxWidth = w + 'px';
</script>

Answer 1

width:100%; height:100%; overflow:scroll;

Answer 2

您选择了两个有趣的容器元素，因为跨度的默认display值为inline，而表的默认值为table。既不尊重overflow属性，也要创建围绕div元素的滚动条，您需要将它们设置为display:block。使用上面的例子：

HTML

<table>
    <tr>
        <td>
            <div>...lots of text here...</div>
        </td>
   </tr>
</table>

CSS

table{
    height:100px;
    width:100px;
    display:block; 
    overflow:scroll;
}

Aand这是 jsFiddle

Answer 3

在overflow-x:scroll或table

中使用td

e.g。

<table style="width:400px; overflow-x:scroll;">
   <tr>
     <td><div>content</div></td>
   </tr>

</table>

div继承宽度＆amp;高度和滚动

3 个答案: