如何获得可滚动框的高度以响应答案

【问题标题】：How to get height of a scrollable box to be reponsive如何获得可滚动框的高度以响应
【发布时间】：2016-08-13 15:00:24
【问题描述】：

因此，我目前正在尝试获取 div 的高度以在变小/变大时保持与宽度的比例，下面的图像更好地显示了我在每张图像底部尝试做的事情。而不是像图 2 中那样溢出的高度，我希望它像图 1 一样，我只是不确定如何在这里做到这一点。

example state 1 | example state 2

HTML

<div class="browser-wrapper">
  <div class="browser">
    <div class="browser-header">
    </div>
    <div class="screen">
      <img src="assets/img/pieces/leakyroof.png" alt="">
    </div>
 </div>
</div>

CSS

.browser-wrapper {
  display: flex;
  padding: 1em;
  align-items: center;
  justify-content: center; }

.browser {
  background-image: url("../../assets/img/broswer-outline.svg");
  background-repeat: no-repeat;
  background-position: 100% 0%;
  width: 76%;
  height: 40em; }

.screen {
 width: 98.8%;
 max-height: 75.5%;
 border-bottom-right-radius: 5px;
 overflow-y: scroll;
 margin: auto; }

.screen img {
  width: 100%; }

.browser-header {
  width: 100%;
  min-height: 5.7vw; }

【问题讨论】：

标签： html css overflow flexbox

【解决方案1】：

这取决于你想使用什么技术，如果只有 css 那么我猜你可以通过@media rule 以各种方式设置你的页面

例如：

@media screen and (min-height: 480px) {
    /*enter code here*/
}

您可以将媒体设置为依赖于您使用的设备。此处显示了更多示例， http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

顺便说一句。

试试 BootstrapCSS，它对你来说应该很方便，但你最终可能会重新设计你的布局。

解决方案 2# Javascript

document.getElementById('someDiv').clientHeight;
document.getElementById('someDiv').offsetHeight;

解决方案3#jQuery

$('#someDiv').height();

【讨论】：

我目前正在使用媒体查询，很难针对每个屏幕尺寸。我希望避免框架引导程序的哪些元素可以解决问题？我正在使用 jQuery，但有什么可以用它来完成的吗？
关于引导程序，您需要了解网格的工作原理，转到此链接并尝试调整窗口大小，您将看到矩形缩放的效果如何getbootstrap.com/css/#grid 在使用 javascript/jquery 时，您需要添加监听窗口调整大小，并手动保持元素的大小

【解决方案2】：

$(window).load(function(e) {
var heights = $("div.mySrvc ul li").map(function ()
{
    return $(this).height();
}).get(),

maxHeight = Math.max.apply(null, heights);

$("div.mySrvc ul li").css('height',maxHeight);

});

希望对您有所帮助。这将获得最大高度的 div 并将其应用于所有其他 div 以获得响应和相同的长度。

【讨论】：

嘿，这似乎不起作用，它设置了一个高度，但它仍然没有包含在盒子里