CSS右側邊欄100％的高度不會工作

我有一個關於100％身高的問題。我從codepen.io創建了這個demo CSS右側邊欄100％的高度不會工作

在這個演示中，你可以看到右側有一個側邊欄。我在那裏有紅色問題。 100％的高度不能正常工作有溢出問題。如果你從紅色分區滾動它是滾動，但沒有任何文字或其他東西。任何人都可以告訴我我在那裏丟失了什麼而沒有溢出。

CSS

html { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

.sidebarwrap { 

    -webkit-background-clip: padding-box; 
    background-color: #dfdfdf; 
    border-left: 1px solid #CCCCCC; 
    box-shadow: inset 1px 0 1px -1px #CCCCCC; 
    display: block; 
    height: 100%; 
    position: fixed; 
    right: 0; 
    top: 0; 
    width: 255px; 
    z-index: 300; 
    padding-top: 57px; 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -o-box-sizing: border-box; 
} 
.col { 
    float: left; 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
    overflow: hidden; 
    padding-top: 57px !important; 
    min-height: 185px; 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    padding: 5px; 
    overflow-y: scroll; 
    width:100%; 
} 
.sidebarin1 { 
    float: left; 
    width: 255px; 
    background-color: #E6E3E3; 
    height: auto; 
    width: 100%; 
    border-top: 1px solid #CCCCCC; 
    border-bottom: 1px solid #CCCCCC; 
    padding: 7px; 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -o-box-sizing: border-box; 
} 
.sidebarin2 { 
    float: left; 
    width: 255px; 
    background-color: #E6E3E3; 
    height: auto; 
    max-height: 250px; 
    width: 100%; 
    margin-top: 2px; 
    border-top: 1px solid #CCCCCC; 
    border-bottom: 1px solid #CCCCCC; 
    padding: 7px; 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -o-box-sizing: border-box; 
} 
.sidebarin3 { 
     width: 100%; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    background-color: #E6E3E3; 
    border-top: 1px solid #CCCCCC; 
    border-bottom: 1px solid #CCCCCC; 
    padding: 7px; 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -o-box-sizing: border-box; 
    float: left; 
    left: 0; 
    overflow: auto; 
    height: 100%; 
    min-height: 100%; 
    height: auto !important; 
    position: relative; 
    margin: 0px; 
    background-color:red; 
} 
.sidebarin3in { 
    position: absolute; 
    height: 100%; 
    bottom: 0px; 
    top: 0px; 
    padding: 5px; 
    box-sizing: border-box; 
    overflow: hidden; 
}

HTML

<div class="sidebarwrap"> 
    <div class="col"> 
    <div class="sidebarin1">fdsafadsfasd fasd fa</div> 
    <div class="sidebarin2">fdsafasdfasdf</div> 
    <div class="sidebarin3"> 
    <div class="sidebarin3in"></div> 
    </div> 
    </div> 
    </div>

來源

2015-11-27 innovation

請張貼的jsfiddle例如:) –

@DejanMunjiza有是codepen.io的一個例子 – innovation

@Leothelion我想滾動欄.sidebarin3 – innovation

你可以給你的側邊欄的高度：

.sidebarin3 {  
    height: calc(100% - 66px); 
}

其中66px高於紅色菜單元素的高度。

爲了使它更清潔，而不是「猜測」這個高度我會建議給固定的高度值，這些元素（PX）

codepen

來源

2015-11-27 08:23:19

謝謝你的有用和易於理解的答案。 – innovation

如果你只是檢查codepen你可以看到操作已經添加到菜單溢出自動，所以只需添加任何高於容器的內容，你將有滾動條。該死的，我討厭快速觸發的人。下調答案意味着「這個答案不是有用的」。 –

沒有。我不是那個意思。通常這些速度如此之快的人不會爲了評論原因而煩惱。抱歉，如果它看起來我的意思是你。應該有2個意見保證一個。 –

CSS右側邊欄100％的高度不會工作

回答

相關問題