保證金/寬度不適當地在div元素位置固定：固定; display：table-cell;設置爲

我需要我的.nav-container位置：fixed;以便內容不會向上或向下滾動。但是這樣做會在.nav-container和.page-content之間產生一定的差距，即某個窗口寬度。在這些寬度上，在.nav容器的紅色背景和右邊的棕色邊框之間似乎有一條小白線。保證金/寬度不適當地在div元素位置固定：固定; display：table-cell;設置爲

如果我擺脫位置：固定;邊距完美呈現，但我需要修正內容。

有沒有人知道工作？

最好/可以離開位置：固定;並使用Javscript在窗口滾動時將.nav-container中的所有內容向下和向上移動，以便它看起來內容完全不移動？

活動鏈接：https://webzume.herokuapp.com/

相關CSS：

#content { 
width: 100%; 
display: table; } 


#index { 
    display: table-row; } 

#index .nav-container { 
position: fixed; 
background-color: rgba(222, 89, 58, 0.95); 
box-sizing: border-box; 
padding-top: 2.5rem; 
vertical-align: top; 
width: 22.6%; 
display: table-cell;}

來源

2016-04-20 Casey

如何邊界設置爲.nav容器的右側，而不是.page-content左側的內容？ – Scraph

從不使用表格格式進行佈局！特別是不與位置結合！

繼承人如何解決它沒有表的佈局：

從#content
從#index
刪除display: table刪除display: table-row從#index .nav-container

刪除position: fixed在這兩個#index .nav-container和#index .page-content，請執行以下操作：

刪除display: table-cell

添加float: left

添加height: 100%

添加overflow: auto

來源

2016-04-20 23:51:24 Scraph

真棒，完全做到了。非常感謝！我好奇的想法，現在我已經刪除位置：固定，爲什麼我的導航不滾動？什麼是產生這個「位置：類似於固定」行爲的.nav-container – Casey

現在左右部分都佔據屏幕高度的100％。如果內容溢出，overflow auto會通知它添加一個滾動條。在滾動光標屬於整個頁面之前，現在滾動條僅屬於右側部分。嘗試將.page-content高度設置爲50％以查看我的意思。 – Scraph

@Casey此外，如果這解決了這個問題，你會介意將它標記爲解決方案:) – Scraph

是否已經設置頁邊距和填充到零？

html，body {margin：0;填充：0; }

來源

2016-04-20 23:47:07

那不是問題。你甚至檢查過實時鏈接嗎？ – Scraph

保證金/寬度不適當地在div元素位置固定：固定; display：table-cell;設置爲

回答

相關問題