javascript - div继承宽高并滚动

标签 javascript html css

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

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

这个 DIV 应该覆盖 400 像素,当内容超过这个宽度时它应该滚动。容器可以是 TD 或 SPAN。一种方法可能是拥有一个仅定义宽度的 CSS 类,并将其应用于容器和 div,但是,我不知道这个 DIV 还会用在哪里以及它的容器的宽度是多少。

编辑 1 通过将 max-width 设置为 100px,我得到了我想要的,否则它会增加容器的宽度。这可能是因为容器的宽度为 %。看起来我需要找到容器的初始宽度,然后设置 DIV 的最大宽度。是吗?

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

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

最佳答案

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

关于javascript - div继承宽高并滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14786119/

相关文章:

javascript - 以数组形式读取和写入数据到 cookie

javascript - 如何在此 javascript 中使用 html 标签?

html - CSS 下拉菜单(阻止父元素在子元素处于事件状态时处于事件状态)

html - 使用 'em' 和百分比时的奇怪行为

javascript - 如何与 Selenium 中处于交互就绪状态的页面进行交互

javascript - IE 跟随链接甚至在 onclick ="return false;"之后

javascript - 如何在函数调用 javascript 中使用 var ejs

javascript - 使用innerHTML 将文本放入文本框中

css - 互联网浏览器 : make text fill space

javascript - 在 Wordpress 中调用 JS 函数