删除窗口的水平滚动会影响内部DIV的高度

Question

我有以下代码，这是对更大代码的简化：

html, body {
	margin: 0 !important;
	padding: 0 !important;
	/* overflow-x: hidden; /* uncomment this line */
}
.app {
	position: relative;
	width: 100%;
	text-align: center !important;
}
.left_panel {
	top: 250px;
	z-index: 20;
}
.panel {
	background-color: #aaeaff;
}
.panel_gallery {
	width: 256px !important;
}
.panel_gallery .panel_content {
    overflow-y: auto;
}
.middle_right_panel {
	position: absolute;
	top: -100px;
	z-index: 10;
	left: 50%;
	transform: translate(-50%);
}
.middle_panel {
	margin-bottom: 270px;
}
.left_panel, .middle_panel {
	display: inline-block;
}
.middle_panel {
	transform: scale(0.6);
}

	<div class="app" style="display:inline-block;text-align:left;margin-top:10px;">
		<div class="left_panel" style="position:relative;">
			<div class="panel panel_gallery">
				<div class="panel_content clearfix">
					abc<br />
					def<br />
					ghi<br />
				</div>
			</div>
		</div>
		<div class="middle_right_panel" style="display:inline-block;">
			<div class="middle_panel" style="position:relative;">
				<div class="workspace" style="position:relative;display:inline-block;width:400px;height:400px;background-color:#80ff8f;" />
			</div>
		</div>
	</div>

以下是JSFiddle：https://jsfiddle.net/qwt8mfo9/

当窗口宽度较小时，会出现一个水平滚动，如下所示：

我需要摆脱它。

然后我尝试使用overflow-x，如下所示：

html, body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
}

然后我得到以下内容，您可以看到内容的高度受到影响，导致div无法到达窗口底部：

在删除窗口的水平滚动后，有关如何让div再次到达窗口底部的任何想法吗？

如果可能，请提供一些JSFiddle分叉。

谢谢！

Answer 1

你只需要提供height:100%就可以了。 调整大小检查这个jsFiddle https://jsfiddle.net/qwt8mfo9/8/

＆＃13;

＆＃13;

html, body {
	margin: 0 !important;
	padding: 0 !important;
	overflow-x: hidden;
  height: 100%;
}
.app {
	position: relative;
	width: 100%;
	text-align: center !important;
  
}
.left_panel {
	top: 250px;
	z-index: 20;
}
.panel {
	background-color: #aaeaff;
}
.panel_gallery {
	width: 256px !important;
}
.panel_gallery .panel_content {
    overflow-y: auto;
}
.middle_right_panel {
	position: absolute;
	top: -100px;
	z-index: 10;
	left: 50%;
	transform: translate(-50%);
}
.middle_panel {
	margin-bottom: 270px;
}
.left_panel, .middle_panel {
	display: inline-block;
}
.middle_panel {
	transform: scale(0.6);
}

＆＃13;

<div class="app" style="display:inline-block;text-align:left;margin-top:10px;">
		<div class="left_panel" style="position:relative;">
			<div class="panel panel_gallery">
				<div class="panel_content clearfix">
					abc<br />
					def<br />
					ghi<br />
				</div>
			</div>
		</div>
		<div class="middle_right_panel" style="display:inline-block;">
			<div class="middle_panel" style="position:relative;">
				<div class="workspace" style="position:relative;display:inline-block;width:400px;height:400px;background-color:#80ff8f;" />
			</div>
		</div>
	</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试以下代码：

.middle_right_panel {

position: absolute;
top: -100px;
z-index: 10;
left: 0;
right: 0;

}

用上面的代码替换“.middle_right_panel”的css。