Question

我有以下代码：

/* css */
.phone {
    height: 100%;
    width: 40%;
    overflow: hidden;
    padding: 0;
    border-radius: 3%;
    border: 2px solid red;
}

.phone .screen {
    height: 50%;
    overflow-y: auto;
    background-color: #c3cee0;
}

.phone .nav {
    background-color: black;
    overflow: hidden;
    color: white;
}

<!-- HTML -->
<div class="phone">
  <div class="screen">
      <p>Lorem Ipsum...</p>
      ...
      <p>Lorem Ipsum...</p>
  </div>
  <div class="nav">
    <p>Back</p>
    <p>Home</p>
    <p>Menu</p>
  </div>
</div>

我希望手机能够快速响应，但为了启用div.screen中的滚动功能，我需要设置height的{{1}}。问题是div.phone超出了手机的内容。

我希望边界能够在red border结束的地方完成，但我会得到不必要的额外空间。直播demostration。

TL; DR

直播demostration 我需要设置一个div.nav（对于height）以便为文本消息启用div.phone，但之后我会获得红色边框显示的额外空间。如何使scroll（红色边框）与整个内容的高度相同（没有额外的空间）？

Answer 1

使用calc（）设置高度。

.phone .screen{
   height: calc(100% - 33px);
 }

33px是底部导航的高度。

Answer 2

以下是您需要删除高度的解决方案：来自.phone的100％属性，并在.phone。屏幕中定义px中的高度，以便它可以正常工作

这是更新的css

.phone {
    height:auto;
}
.phone .screen {
    height: 400px;
    overflow-y: auto;
    background-color: #c3cee0;
}

这是live demo

Answer 3

我使用display: flex解决了这个问题。直播demonstration。

基本上

.phone {
    height: 50%; /* whatever height you need */

    display: flex;
    flex-direction: column; /* used to separate the divs vertically */
                            /* instead of horizontally */
    border-radius: 3%;
    border: 2px solid red;
}

.phone .screen {
    flex: 9; /* screen will take 9/10 spaces from the div.phone */
    overflow-y: auto; /* enables scroll */
}

.phone .nav {
    flex: 1; /* nav will take 1/10 spaces from the div.phone */
}

如何使用HTML中的滚动内容制作响应式div？

3 个答案: