如何具有三种div高度：一种基于百分比，一种用于填充，另一种基于图像的宽度

Question

所需结果：

更多详细信息：

现在，我正在根据估算值设置Div高度（即，搜索栏为10％，中间为60％，底部为30％），并将缩略图大小设置为适合我的三星手机。问题在于，在不同的手机上，宽度是不同的，并且Div3的边框很大。使事情复杂化的是，Div2可以向上/向下滚动（轻微问题），而Div3可以向左/右侧滚动（中等问题）。

从这里https://img.youtube.com/vi/NJ2YyejQjpw/maxresdefault.jpg获得的所有缩略图均保证为16：9（我相信）

我遇到了一些概念性问题，试图根据将图像拉伸（或多或少）屏幕宽度时生成的高度来确定div（Div3）的大小

问题： 如何获得下面的三个div，同时允许（1）在Div2中垂直滚动和（2）在Div3中水平滚动

代码： JSFiddle code。尝试使用iPhone X，看起来很奇怪

重要部分：

#search_bar {
    width: 100%;
    height: 10%;
    border: 0px;
    float: right;
    padding:0px;
    position: relative;
    background-color:red;
}

#search_results {
    width: 100%;
    height: 58%;
    padding:4px;
    float: right;
    overflow:auto;
    background-color:green;
}

#playlist_reel {
    width: 100%;
    height: 32%;
    padding:4px;
    clear: both;
    overflow-x: auto;
    white-space: nowrap;
    background-color:blue;
}

Answer 1

我离开了您包含的图表，并尝试复制它的简单版本。

• 使用flexbox进行列布局
• I found a way to store in one file and used that file for decryption and its working. here is my approach while writing IV and key in 2 different files, i have written in one file. And for Decryption i read the file like first 16bytes for IV and last 32 bytes for secretkey. FileOutputStream OutFile = new FileOutputStream("C:\\SecretFile.key"); OutFile.write(iv); KeyGenerator kgen = KeyGenerator.getInstance("AES"); kgen.init(256); SecretKey skey = kgen.generateKey(); byte[] keyb = skey.getEncoded(); OutFile.write(keyb); OutFile.close(); 占用了尽可能多的空间
• #search_results和#search_bar仅占据它们占据的空间（完全可调）
• 为#playlist_reel使用background-image，以便始终覆盖元素。
• 在#search_results中使用静态img，以便占用实际的DOM空间

对于滚动，在我发布此内容时，要求感觉有些宽泛。也许这个演示会让您足够接近，可以自己尝试滚动。

注意：该演示可以在“整页”模式（此处为SO）或jsFiddle中更轻松地查看。

.bottom

html, body { margin: 0; }

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 380px;
  max-width: 100%;
  margin: 0 auto;
}

#search_bar [type=search] {
  width: 100%;
  padding: 1em;
  font-size: 1.25rem;
}

#search_results {
  flex-grow: 1;
  background-image: url('http://placekitten.com/400/500');
  background-size: cover;
}

img {
  max-width: 100%;
  height: auto;
}

jsFiddle