Question

我有一个侧边栏，由JS显示和隐藏css动画。为此，我需要将内容div（#main）与left: 250px;。

放在一起

#main {
  left: 250px;
  position: relative;
  overflow: hidden;
}

在#main - div内部有一些内容。例如一张大桌子

<div id="sidebar">
    SIDEBAR
</div>
<div id="main">
    <table style="width: 100%" class="table">
        <tr>
            <td>SOME BIG CONTENT1...</td>
            <td>SOME BIG CONTENT2...</td>
            <td>SOME BIG CONTENT3...</td>
            <td>SOME BIG CONTENT4...</td>
            <td>SOME BIG CONTENT5...</td>
            <td>SOME BIG CONTENT6...</td>
        </tr>
    </table>
</div>

我的问题/问题：如何防止水平滚动条？

请参阅https://jsfiddle.net/3y6hpeyw/

编辑：KCarnaille的解决方案： 见https://jsfiddle.net/3y6hpeyw/12/

唯一的问题是缺乏对旧浏览器（http://caniuse.com/#feat=calc）的支持。

Answer 1

添加到#main：

 width: calc(100% - 250px);

它适用于你给的小提琴。

Answer 2

你可以这样做，并且它与你的侧边栏一起动画很好。

查看您的fiddle demo

.sidebar-open #main {
  margin-left: 250px;
}

CSS：位置左：250px，但溢出隐藏

2 个答案: