Question

我有一个父母div ，其中添加了儿童div 。我使用分页设置为五个。在大屏幕上，一切都很好，但是在较小的设备（分辨率为1920x1080像素的14.00英寸显示器）上，儿童div 会覆盖底部的父div 。

儿童div 的整个高度可能会有所不同，具体取决于显示的儿童div 数量（1、2、3、4或5）

这是我的父级div 的CSS：

header.nav_masthead {
    padding-top: 6.5rem;
    background-color: #345a61;
    background-size: cover;
    background-position: center;
    background-image:;...;
}

添加了children div的div：

<div id='fav_list'  class="w-75  mx-auto" style='background-color: transparent; height: auto;'>

这是我的页面HTML：

{% block content %}

<header class="masthead" >

  <div class="col-lg-12">

    <h2 class="intro-text text-center" style="color: beige;">Bienvenue sur ton compte {{ user }}</h2>
    <hr class="divider1 my-4" />

    <div class='w-75 mx-auto  row d-flex justify-content-around mb-3'>
      <h3 class="intro-text text-center account_items" style="color: beige;">Produit recherché</h3>
      <h3 class="intro-text text-center account_items" style="color: beige;">Produit de substitut</h3>
    </div>
    </div>

  <div id='fav_list'  class="w-75  mx-auto" style='background-color: transparent; height: auto;'>

    {% for saved in saved_list %}

    <div class='row d-flex justify-content-between'>

      <div class="card mb-3" style="width: 49%;">
        <div class="row no-gutters">
          <div class="col-md-2 my-auto">
            <img class="mx-auto d-block" style="width:auto; height:auto; max-width:100px; max-height:100px; "
              src="{{ saved.original_product.picture }}">
          </div>
          <div class="col-md-10">
            <div class="card-body">
              <h5 class="card-title"><a href="{% url 'finder:detail' saved.original_product.id %}"
                  class="aaccount">{{ saved.original_product.real_name }}/ {{ saved.original_product.real_brand }}</a>
              </h5>
              <img src="/static/finder/img/nutriscore-{{ saved.original_product.nutrition_grade}}.svg"
                style="width:70px;"><br>
            </div>
          </div>
        </div>
      </div>

      <div class="card mb-3" style="width: 49%;">
        <div class="row no-gutters">
          <div class="col-md-2 my-auto">
            <img class="mx-auto d-block " style="width:auto; height:auto; max-width:100px; max-height:100px; "
              src="{{ saved.sub_product.picture }}">
          </div>
          <div class="col-md-9">
            <div class="card-body">
              <h5 class="card-title"><a href="{% url 'finder:detail' saved.sub_product.id %}"
                  class="aaccount">{{ saved.sub_product.real_name}}/ {{ saved.sub_product.real_brand }}</a>
              </h5>
              <img src="/static/finder/img/nutriscore-{{ saved.sub_product.nutrition_grade}}.svg"
                style="width:70px;"><br>
            </div>
          </div>
          <div class="col-md-1 my-auto mx-auto">

          <button type ='button' class=' btn substitut' value='{{ saved.id }}'>{% csrf_token %}<i class='fas fa-trash-alt'></i></button>              
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>

  </header>

    <div id='navigation'>                      
        {% if paginate %}
        <div  style="background-color: #E8A75D; overflow: auto; ">
        <div class="clearfix"></div>
        {% for i in page_range %}
        {% if i == 1%}       
        <span><button class='btn nav_button first ' value='{{ i }}'>{{i}}</button></span>
        {% else %}
        <span><button class='btn nav_button ' value='{{ i }}'>{{i}}</button></span>
        {% endif %}        
        {% endfor %}
        {% endif %}    
    </div>         


{% endblock %}

我该怎么做才能使我的div 'fav_list'不与我的div '.nav_masthead'重叠？

儿童div重叠父div

0 个答案: