只要body和sub sub div滚动即可缩放div

时间：2019-07-16 19:21:34

标签： css

我遇到了我从未遇到过的CSS问题。 我在页面右侧有一个div（bs窗格），该高度应与主体一样高（不计算自身）。到目前为止，这对我的项目有效。在该bs窗格内，我有一个sub-sub div（#bsresults），当它太长时，必须滚动。   但是没有任何效果。 奇怪的是，bs窗格的高度与我项目中的内容一样长（waaaay更多css），而这只是我遇到问题的#bsresults。花了几个小时，我被困住了。 任何帮助表示赞赏。

#bs-pane {
min-width: 30em;
box-sizing: border-box;
position: absolute;
top: 80px;
right: 0;
z-index: 9000;
background-color: hsl(0, 0%, 100%);
box-shadow: -0.3em 0.3em 0.5em;
border-radius: 5px;
max-width: 50vw;
font-size: small;
font-family: arial,sans-serif;
max-height: calc(100% - 80px);
background-color:blue;
}
#bs-pane #bsresults {
box-sizing: border-box;
overflow-y: scroll;
overflow-x: hidden;
height: inherit;
padding: 2em;
background-color: hsla(24,80%,80%,0.5);
max-height: inherit;
}

这是完整的小提琴：https://jsfiddle.net/3tqs6n0p/ 换句话说：蓝色/紫色的div底部应在最后一个“ Blablabla”处结束，黄色的div应当留在其中并滚动。 问题当然是后者的高度。

1 个答案:

答案 0 :(得分：0)

你的意思是这样

#bs-pane {
  min-width: 30em;
	box-sizing: border-box;
	position: absolute;
	top: 80px;
	right: 0;
	z-index: 9000;
	background-color: hsl(0, 0%, 100%);
	box-shadow: -0.3em 0.3em 0.5em;
	border-radius: 5px;
	max-width: 50vw;
	font-size: small;
	font-family: arial,sans-serif;
	max-height: calc(100vh - 80px); /* change from 100% */
  background-color:blue;
  overflow-y:scroll; /* added */
}
#flextitle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1em;
	position: absolute; /* changed from fixed */
	right: 0;
	background: white;
	padding: 1.5em 1em 2em 0em;
  background-color:red;
  height:4rem;
  width:10rem;
}
#bs-pane #bsresults {
	box-sizing: border-box;
	overflow-y: scroll;
	overflow-x: hidden;
	height: inherit;
	padding: 2em;
  background-color: hsla(24,80%,80%,0.5);
}
<div id="main">
<div>
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
</div>
<div>
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
</div>
<div>
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
</div>
<div>
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
</div>
<div>
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
</div>
<div>
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
</div>
<div>
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
</div>
<div>
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
</div>
<div>
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
</div>
<div>
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
Blabla bla blablablable<br>
Bluebleeblaie bleak freak shot me sjeik
</div>
</div>
<div id="bs-pane">
<div id="flextitle">
flextitle, fixed division
</div>
<div id="bsbelowtit">
	<div id="bsresults">
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  <div>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  Some text   Some text   Some text   Some text   Some text <br>
  </div>
  </div>
  </div>
</div>

相关问题
最新问题