[英]CSS right sidebar 100% height wont work
我有一个关于100%身高的问题。 我已经从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是红色菜单上方元素的高度。
为了使其更清洁而不是“猜测”这个高度,我建议为这些元素提供固定的高度值(以px为单位)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.