100％的div容器用保證金+固定導航

左手屏幕
右手一個div容器上的固定導航面板在較小的容器DIV（其中有100％的寬度+餘量）萬軍內容

問題是我無法得到我想要的東西而不損害conten的導航或大小t div容器。

我希望有些我說的是有道理的，如果不看說明如下

不正確的（當前狀態）：

___________ 
| ___|_____ | 
||___|_____|| 
| ___|_____ | 
||___|_____|| 
|____|______|

正確（所需狀態）：

____________ 
| | _____ | 
| ||_____|| 
| | _____ | 
| ||_____|| 
|____|_______|

來源

2014-09-12 mk_89

有一些問題，你的佈局......

你的資產淨值的position: fixed是一個壞主意。它將元素從頁面流中取出，並且您的float: left變得毫無用處。

最好讓內容通過內聯定位技術（例如css表格）自動填充屏幕。我建議你把你的nav和content div變成display: table-cell元素。

然後，在導航設置width: 200px將使內容div來填補剩餘的空間：

Updated Fiddle

body{ 
    padding:0; margin:0; 
    display: table; 
    width: 100%; 
} 
#content { 
    display: table-cell; 
    background: black; 
    overflow: auto; 
} 

#box{ 
    background: red; 
    min-height: 200px; 
    margin: 10px 
} 

.nav { 
    width:200px; 
    height:100%; 
    background:blue; 
    text-align:right; 
    padding: 5px 10px 0 0; 
    display: table-cell; 
}

來源

2014-09-12 21:56:14 LcSalazar

感謝您的幫助，現在我可以使用.nav容器作爲固定導航的包裝 – 2014-09-12 22:05:07

只需添加到您的＃內容元件固定面板的寬度按邊距。

#content { 
    background: black; 
    overflow: auto; 
    width:100%; 
    margin-left: 200px; 
}

來源

2014-09-12 21:51:55 David

這不是我想要的，這最終導致頁面太大，不得不水平滾動頁面。 – 2014-09-12 21:54:29

爲了避免這個問題，您應該將固定面板的寬度和#content margin px轉換爲％，以使其響應並且不會有水平滾動。 – David 2014-09-12 21:56:33

http://jsfiddle.net/2tybnho2/1/

.nav { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 200px; 
    bottom: 0; 
    background-color: lightblue; 
} 

.contents { 
    position: absolute; 
    top: 0; 
    left: 200px; 
    right: 0; 
    bottom: 0; 
    background-color: lightgreen; 
}

有一個很簡單的方法，現在的訣竅就是讓內容滾動到正確的位置。基本上它所做的是將角落設置到屏幕的指定區域，並使它們不移出該位置。

來源

2014-09-12 21:58:36 Bioto

它現在修復了，我更新了鏈接。 – Bioto 2014-09-12 22:00:10

100％的div容器用保證金+固定導航

回答

相關問題