Question

我有一个类似这样的结构：

<html>
<body>
<div id="div1">
  <div id="div2">
  </div>
  <div id="div3">
  </div>
</div>
</body>
</html>

div3的内容非常宽，会使浏览器水平向右延伸。

如何让div3只延伸到它的父级，但是当它太宽时，启用水平滚动？我不想确定长度，并希望它能使用所有浏览器的水平空间。

我做过<div style="width:100%; overflow-x:scroll;">但仍然没有工作。不确定会出现什么问题。我还确保div继承的每个级别都有宽度：100％。最外层也有最大宽度：100％。

提前谢谢。

这里是我想要做的但却无法做到的例证：

Answer 1

我假设这是你想要的？只是一个div将扩展和与浏览器签约但内部的内容是可滚动的？如果是这样的话，那就是您要找的overflow-x:scroll和<div id="div1" style="border:1px solid #000; height:500px; width:100%"> <div id="div2" style="border:1px solid #FF0000; margin-top:200px; width:100%; overflow-x:scroll;"> this is content this is content this is content this is content this is content this is content this is content this is content this is content this is content this is content this is content this is content this is content this is content this is content this is content this is content this is content </div> <div id="div2" style="border:1px solid #FFFF00; margin-top:20px; width:100%; overflow-x:scroll;"> thisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontent </div> </div>。

public void setName(String name) {
    this.name = name;
}

这是一个有效的FIDDLE

div脂肪含量拉伸到页面滚动

1 个答案: