Question

有html代码：

 <div class="container content">
 <div class="wrap-container row">
   <div class="col-xs-12 col-md-5 text-center text-white left">
     <h2 class="mt-5">Contact</h2>
      <h1> 987 123 456</h1>  
   </div>
   <div class="col-xs-12 col-md-6 ml-auto right">
     <div class="form">
        <form>
          <!-- form controls -->
        </form>
     </div>
   </div>       
 </div>
</div>

现在在css

.content.container {
    height: 80vh;
    overflow: hidden;
    box-sizing: border-box;
}

.wrap-container {
    position: relative;
    height: 80%;
    border-radius: 5px;
    background: rgba(0,0,0,.3);
    overflow: hidden;
    box-sizing: border-box;

}
.left {
    text-shadow: 0px 1px 2px #808080, 2px 2px 1px rgba(47,171,81, 0.8);
    font-family: Verdana, Geneva, Tahoma, sans-serif;


}
.right {
    background: rgba(0,0,0,.8);
    color: #b9b9b9;
    margin: 2rem;
    height: 86%;
    overflow: hidden;
    box-sizing: border-box;
}
.form {
    overflow: auto;
    height:99%;
    padding-right: 3rem;
    position: relative;
    width: 110%;
    left: 0;
    right: -2rem;
}
@media (max-width: 768px) { 
    .content.container {
        height: 200vh;
        display: block;
    }

    .wrap-container {
        display: block;
        height: auto;
        overflow: auto;

    }
    .cb-slideshow li div h3 {
        line-height: 0;
    }
    .right, .left {
        margin:0;
    }
    .right {
        height: auto;
    }
    .form {
        padding-right: 1.5rem;
        /*height: auto;*/
        display: block;
    }
 }

现在，当.form div高于verticah height（100vh）内容被切断时。在像手机这样的小设备中，我可以滚动。形成div内容，但只有vh可见，没有可见的提交按钮：/ 我在.content.container的媒体查询高度200vh中添加了什么解决了问题，但我认为这不是正确的方法。

如何将可滚动div扩展到其内容高度？

Answer 1

适应父母身高的儿童最好使用flexbox解决。

我已将wrap-container设置为flex和flex-direction：列，因为子项已堆叠。我会尽量避免为所有孩子设置不同的高度。

然后只需添加overflow-y：滚动到表单。

.wrap-container {
display: flex;
flex-direction: column;
}
.form {
overflow-y: scroll;
}

如果您希望获得类似的内容：主容器的100vh和溢出的项目：隐藏但.form可滚动，对于所有设备，应该这样做：

Fiddle

可滚动div的CSS整页背景高度

1 个答案: