如何将所有设备的特定位置的元素设置为响应

问题描述

我有一个网络应用程序，它将成为智能手机应用程序。所以它必须太敏感了。 现在我的问题是：

我有一个父 div 和 4 个孩子。我想放下最后一个，直到它具有父级底部边框的视觉效果：

-----( 内容 )-----

[这是我针对特定解决方案得到的结果。我希望它适用于所有分辨率：

我应该为此向父级添加“高度”吗？

有一个简单的代码。我怎样才能使它像我为所有分辨率附加的图像一样？

<style>
    #parent{
        border-bottom : 2px solid;
    }
    #child{
        pading:10px;
        border-radius:30px;
    }
</style>

和这样的html：

<div id="parent">
    <span style="">
         Content
    </span>
</div>

解决方法

这样做：

    .parent {
      position: relative;
      height: 200px;
      width: 100%;
    }

    .content {
      border: 2px solid tomato;
      padding: 10px;
      border-radius: 30px;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      background-color: white
    }

    .line {
      width: 100%;
      position: absolute;
      border-bottom: 2px solid tomato;
      bottom: 20px;
    }

  <div class="parent">
    <div class="line"></div>
    <div class="content">
      Content
    </div>
  </div>