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

我有一個側邊欄，它顯示和隱藏的JS與CSS動畫。爲此，我需要將內容div（#main）定位爲left: 250px;。CSS：位置左：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）的支持。

來源

2016-01-10 bernhardh

我只想補充'溢出：隱藏;'當側邊欄打開時，身體因爲你已經在做該動作與JS，你可以一類簡單地附加防止溢出。將桌子換成列表並讓網絡變得更好。 – JohnDevelops

如果你有興趣，你可以用flexbox做這樣的事情https://jsfiddle.net/3y6hpeyw/4/ –

插件溢出：對身體隱藏不起作用。你不明白 - 它是一個動畫（可能無形）的邊欄。所以爲了轉換，我需要左邊的位置。看到更新的例子，看看我的意思：https://jsfiddle.net/3y6hpeyw/12/ – bernhardh

你可以做到這一點，它與你的側邊欄一起動畫很好。

查看您所在fiddle demo

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

來源

2016-01-10 22:24:49 LGSon

添加到#main：

width: calc(100% - 250px);

它與你給的小提琴。

來源

2016-01-10 19:17:32 KCarnaille

很好的解決方案。我只是用更復雜的版本來嘗試它（參見新的小提琴，它也適用）。 https://jsfiddle.net/3y6hpeyw/12/。唯一的問題是缺乏對舊瀏覽器的支持。 – bernhardh

確實！ LGSon的解決方案可能有點清潔。 – KCarnaille

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

回答

相關問題