我有一个关于 100% 高度的问题。我创建了这个 demo来自 codepen.io
在此演示中,您可以看到右侧有一个侧边栏。我在那里的红色 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>
最佳答案
你可以给你的侧边栏一个高度:
.sidebarin3 {
height: calc(100% - 66px);
}
其中 66px 是红色菜单上方元素的高度。
为了使它更清晰而不是“猜测”这个高度,我建议为这些元素提供固定的高度值(以像素为单位)
关于html - CSS 右侧边栏 100% 高度不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33952830/