無法獲取邊欄到高度：100％

我最近一直在學習CSS，我試圖理解爲什麼我無法讓我的邊欄正確顯示。無法獲取邊欄到高度：100％

在我的代碼，我已經加入

html, body, .container, .sidebar, .content { 
    height: 100%; 
}

這使得側邊欄擴展，但它帶有一個附加滾動。沒有理由需要滾動時有滾動。另外，如果我添加足夠的文本來填充內容div，我將無法看到數據。在這裏看到：你

https://jsfiddle.net/bnu0Ljuo/5/

注意怎麼也無法向下滾動查看「測試不能見文」。這怎麼樣？

來源

2017-04-20 Richard Cole

你想要這個嗎？ See this fiddle

我替換選擇器並將min-height添加到html, body。我還對.container去除overflow: hidden;並添加height: 100vh;到.sidebar：

.container, .sidebar, .content { 
    height: 100%; 
} 

div#container { 
    width: 100%; 
    margin: 0 auto; 
    position: relative; 
    height: 100%; 
} 

html, body { 
    min-height: 100%; 
} 

.sidebar { 
    height: calc(100vh - 60px); 
    min-height: 100%; 
    top: 0; 
}

來源

2017-04-20 07:45:21

是的，但是在第一的jsfiddle，這是行不通的。證明：https://jsfiddle.net/bnu0Ljuo/8/ –

@RichardCole我沒有看到問題。你提供的「不工作證明」的jsfiddle對我來說工作得很好。與它有什麼關係？ – frikinside

這幾乎解決了，但仍然沒有解決。我只想知道爲什麼現在底部有一個額外的空間可以滾動（https://jsfiddle.net/bnu0Ljuo/16/）。有沒有辦法去除這個空間？ –

我不知道你想達到什麼，但如果你設置

html, body, .container, .sidebar, .content { 
    height: auto; 
    min-height: 100vh; 
}

所有的內容是可見的。

https://jsfiddle.net/ab51xj8u/2/

來源

2017-04-20 07:46:55 RacoonOnMoon

當內容不夠低時不起作用，例如：https：//jsfiddle.net/bnu0Ljuo/9/ –

min-height：auto;不會工作 – RacoonOnMoon

https://jsfiddle.net/ab51xj8u/ – RacoonOnMoon

嘛，awnser是非常簡單的。用下面的代碼：

html, body, .container, .sidebar, .content { 
    height: 100%; 
}

你是在告訴selectors是100%高度。在這種情況下，100%是屏幕的高度，即viewport。增加的額外空間是header的height。要解決此問題，請告知selectors高度爲最小值100%。

所以更改此設置：

html, body, .container, .sidebar, .content { 
    height: 100%; 
}

爲：

html, body, .container, .sidebar, .content { 
    min-height: 100%; 
}

https://jsfiddle.net/bnu0Ljuo/14/

來源

2017-04-20 08:48:33 Red

無法獲取邊欄到高度：100％

回答

相關問題