0

如何让 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>
4

3 回答 3

0

您选择了两个有趣的容器元素，因为 span 的默认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

于 2013-02-09T08:56:32.917 回答
0 
width:100%; height:100%; overflow:scroll;
于 2013-02-09T08:03:58.827 回答
0

用于或overflow-x:scroll_tabletd

例如

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

</table>
于 2013-02-09T09:14:17.667 回答