Div在宽度上没有包裹整个页面

Question

我使用jQuery UI的tabs作为我的容器div。现在我需要在表格中显示大量数据，该表格几乎总是比容器本身宽。不幸的是，我无法使容器换行。

请参见这个fiddle 我尝试了一些方法，如定位和overflow: auto，但似乎都不能按照我想要的方式工作。 overflow: auto将水平滚动条放置在选项卡本身上，但我希望它出现在主体上。有人知道如何做到这一点吗？

简而言之：我需要#main-div包裹其所有的div子元素，而选项卡中不应该出现滚动条。我只想让我的内容自适应外部div。

- Deep Frozen

---

所以，让我明白一下，你想要在选项卡内部滚动，但希望滚动条位于窗口底部？为什么不重新设计滚动条，使其看起来更加用户友好呢？ :) - Simon Dragsbæk

@SimonPertersen 我需要在主体上使用滚动条来滚动选项卡中的内容。我不想让这个项目变得太复杂，所以我不会重新设计滚动条。现在，这个问题已经通过CSS解决了，并且它完全满足需求。 - Deep Frozen

我可以补充一点，你需要发布一个清晰的问题，仔细检查一下你刚刚写的内容 :) 但现在它有意义了。 - Simon Dragsbæk

@SimonPertersen 通常我的问题会更清楚一些。我猜只是因为今天是星期一，所以希望能够快速解决。 - Deep Frozen

Answer 1

您是指这个吗？我所做的仅仅是去掉了相对定位。

#main-tabs
{
   float:left;
   min-width:100%;
}

- Sem

Answer 2

添加 #test { overflow: auto; }

查看演示

- Ahsan Khurshid

---

是的，它确实会移除滚动条，但我需要能够滚动，并且希望在主体上有滚动条。 - Deep Frozen

请使用 oveflow:auto 而不是 oveflow:hidden。 - Ahsan Khurshid

也许之前有点不太清楚。我已经更新了我的回答。你的回答对我没有用。 - Deep Frozen

Answer 3

Jsfiddle

我添加了overflow:scroll;

无论如何，现在你可以在两个轴上滚动，所以你可以查看一下x和y的overflow scroll属性。请查看这里的属性（请注意，这是CSS 3属性），不知道哪些浏览器支持它。

- Simon Dragsbæk

---

也许之前有点不太清楚。我已经更新了我的回答。你的回答对我没有用。 - Deep Frozen

Answer 4

#main-tabs div
{
   position: relative;
   overflow: auto;
}

- Tosh

---

也许之前有点不太清楚。我已经更新了我的回答。你的回答对我没有用。 - Deep Frozen

Answer 5

#test {
    overflow: scroll;
}

- Sparky