我有一个关于100%身高的问题。我从codepen.io
创建了这个demo在此演示中,您可以看到右侧有侧边栏。我在那里有红色div的问题。 100%高度无法正常工作存在溢出问题。如果你从红色div下来,它会滚动,但没有任何文字或其他东西。任何人都可以告诉我我在那里缺少什么而不会溢出。
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>
答案 0 :(得分:1)
您可以给侧栏高度:
.sidebarin3 {
height: calc(100% - 66px);
}
其中66px是红色菜单上方元素的高度。
使它更干净而不是猜测&#34;这个高度我建议给这些元素赋予固定的高度值(在px中)
<强> codepen 强>