css - 我在 div 中的最后一个元素溢出，所以只有一半元素可见

Question

我正在为移动浏览器准备我的网站，所以我在 Chrome 开发工具上测试了 320 x 568 大小，但我遇到了这个问题。

我的按钮元素在 div 的底部，但按钮的一半可见，另一半不可见。

Screenshot on the situation

我尝试设置背景样式(背景大小等)，但这些更改并没有解决问题。

克服此问题的基本文档/建议是什么？

父级

<div class="view" id="activeSubstance" data-spy="activeSubstance" data-target="#activeSubstance" style="background-image: url('img/calculate_02.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center;"></div>

child

<div class="row text-center align-items-center mt-3">
 <div class="col" id="calculate">
  <button type="button" class="btn btn-cyan btn-lg disabled" id="calcButton">Hesaplayalım</button>
 </div>
</div>

完整代码

  <div class="view" id="activeSubstance" data-spy="activeSubstance" data-target="#activeSubstance" style="background-image: url('img/calculate_02.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center;">
<!-- Mask & flexbox options-->
<div class="mask rgba-stylish-light align-items-center flex-center">
  <!-- Content -->
  <div class="container">
    <div class="row mt-3">
      <!--Dropdown primary-->
      <div class="col mt-2">         
        <!--Dropdown primary-->            
        <div class="dropdown">          
          <!--Trigger-->
          <a class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false" style="display: block">Etken Madde Seçimi</a>     
          <!--Menu-->
          <div class="dropdown-menu dropdown-primary" id="substanceList">
            <a class="dropdown-item">Daptomisin - <small>Cubicin</small></a>
            <a class="dropdown-item">Ertapenem sodyum - <small>İnvanz</small></a>
            <a class="dropdown-item">Flukonazol - <small>Lumen EF</small></a>
            <a class="dropdown-item">İmipenem / Silastatin sodyum - <small>Tienam</small></a>
            <a class="dropdown-item">Kolistimetat sodyum - <small>Colimycin</small></a>
            <a class="dropdown-item">Levofloksasin - <small>Tavanic</small></a>
            <a class="dropdown-item">Linezolit - <small>Zyvoxid</small></a>
            <a class="dropdown-item">Meropenem trihidrat - <small>Meronem</small></a>
            <a class="dropdown-item">Metronidazol - <small>Metronidazol</small></a>
            <a class="dropdown-item">Moksifloksasin hidroklorür - <small>Avelox</small></a>
            <a class="dropdown-item">Piperasilin sodyum / Tazobaktam sodyum - <small>Tazocin EF</small></a>
            <a class="dropdown-item">Sefoperazon sodyum / Sulbaktam sodyum - <small>Sulperazon</small></a>
            <a class="dropdown-item">Siprofloksasin laktat - <small>Ciproktan</small></a>
            <a class="dropdown-item">Teikoplanin - <small>Targocid</small></a>
            <a class="dropdown-item">Tigesiklin - <small>Tygacil</small></a>
            <a class="dropdown-item">Vankomisin hidroklorür - <small>Vancotek</small></a>
          </div>
        </div>              
      </div>
      <!--/Dropdown primary-->
      <!--Dropdown primary-->
      <div class="col mt-2">          
        <!--Dropdown primary-->            
        <div class="dropdown">          
          <!--Trigger-->
          <a class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false" style="display: block">Cockcroft-Gault Denklemi</a>     
          <!--Menu-->
          <div class="dropdown-menu dropdown-info" id="methodlist">
            <a class="dropdown-item2" id="willDisable">Cockcroft-Gault Denklemi</a>
            <a class="dropdown-item2" id="willDisable2">e-GFR Hesaplayıcısı</a>
          </div>
        </div>              
      </div>
      <!--/Dropdown primary-->
    </div>
    <div class="row mt-3">
      <div class="col" style="display:none" id="notNeeded">
        <p class="note note-info wow fadeIn" id="nonDiyaText">Bu etken madde için böbrek yetmezliği durumunda doz ayarlaması gerekmemektedir.</p>
      </div>
    </div>
    <div class="row text-center align-items-center" id="cockgaulty">
      <div class="col-6 col-lg-2">
        <select class="browser-default custom-select" id="gender1">
          <option selected>Cinsiyet</option>
          <option value="1">Erkek</option>
          <option value="2">Kadın</option>
        </select>
      </div>
      <div class="col-6 col-lg-2 md-form input-group mb-3">
        <input type="number" id="age1" class="form-control" placeholder="Yaş" aria-label="Yaş" aria-describedby="material-addon1" step='1' autocomplete="off" min="0">
      </div>
      <div class="col-6 col-lg-2 md-form input-group mb-3">
        <input type="number" id="srcr1" class="form-control" placeholder="Serum kreatinini" aria-label="Serum kreatinini" aria-describedby="material-addon1" step='0.01' autocomplete="off" min="0">
      </div>
      <div class="col-6 col-lg-2">
        <select class="browser-default custom-select" id="crunit1">
          <option selected value="1">mg/dL</option>
          <option value="2">‎µmol/L</option>
        </select>
      </div>
      <div class="col-6 col-lg-2 md-form input-group mb-3">
        <input type="number" id="weight" class="form-control" placeholder="Ağırlık" aria-label="Ağırlık" aria-describedby="material-addon1" step='0.5' autocomplete="off" min="0">
      </div>
      <div class="col-6 col-lg-2 custom-control custom-checkbox mt-3" id="diya1" style="padding-left: 2.5rem;">
        <input type="checkbox" class="custom-control-input" id="diyaliz1">
        <label class="custom-control-label" id="dia1" for="diyaliz1">Hemodiyaliz Alıyor</label>
      </div>
    </div>
    <div class="row text-center align-items-center" style="display:none" id="egfry">
      <div class="col-6 col-lg-2">
        <select class="browser-default custom-select" id="gender2">
          <option selected>Cinsiyet</option>
          <option value="1">Erkek</option>
          <option value="2">Kadın</option>
        </select>
      </div>
      <div class="col-6 col-lg-1 md-form input-group mb-3">
        <input type="number" id="age2" class="form-control" placeholder="Yaş" aria-label="Yaş" aria-describedby="material-addon1" step='1' autocomplete="off" min="0">
      </div>
      <div class="col-6 col-lg-2 md-form input-group mb-3">
        <input type="number" id="srcr2" class="form-control" placeholder="Serum kreatinini" aria-label="Serum kreatinini" aria-describedby="material-addon1" step='0.01' autocomplete="off" min="0">
      </div>
      <div class="col-6 col-lg-1">
        <select class="browser-default custom-select"  id="crunit2">
          <option selected value="1">mg/dL</option>
          <option value="2">‎µmol/L</option>
        </select>
      </div>
      <div class="col-6 col-lg-1 md-form input-group mb-3">
        <input type="number" id="nitrog" class="form-control" placeholder="BUN" aria-label="BUN" aria-describedby="material-addon1" step='0.01' autocomplete="off" min="0">
      </div>
      <div class="col-6 col-lg-2 md-form input-group mb-3">
        <input type="number" id="albumin" class="form-control" placeholder="Albumin" aria-label="Albumin" aria-describedby="material-addon1" step='0.01' autocomplete="off" min="0">
      </div>
      <div class="col-6 col-lg-1 custom-control custom-checkbox mt-2">
        <input type="checkbox" class="custom-control-input" id="black">
        <label class="custom-control-label" for="black">Siyahi</label>
      </div>
      <div class="col-6 col-lg-2 custom-control custom-checkbox mt-2" id="diya2">
        <input type="checkbox" class="custom-control-input" id="diyaliz2">
        <label class="custom-control-label" id="dia2" for="diyaliz2">Hemodiyaliz Alıyor</label>
      </div>
    </div>
    <div class="row mt-3">
      <div class="col" id="infoDiv">
        <p class="note note-info wow fadeIn" id="infoText"><strong>Cockcroft-Gault Denklemi </strong>ile hesaplama yaparken cinsiyet, yaş, ağırlık ve serum kreatinini değerlerini girmeniz gerekir.</p>
      </div>
    </div>
    <div class="row text-center align-items-center mt-3">
      <div class="col" id="calculate">
        <button type="button" class="btn btn-cyan btn-lg disabled" id="calcButton">Hesaplayalım</button>
      </div>
    </div>
  <!-- /Content -->
  </div>
</div>

导致“ View ”类 CSS 的问题

.view {
 position: relative;
 overflow: hidden;
 cursor: default; }

 .view .mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-attachment: fixed; }

  .view img, .view video {
  position: relative;
  display: block; }

  .view video.video-intro {
  z-index: -100;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -webkit-transition: 1s opacity;
  -o-transition: 1s opacity;
  transition: 1s opacity;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto; }

PS:正如您在屏幕截图中看到的，我提到的“div 的末尾”并不是页面的末尾，而是另一个 DIV 开始。但是我的按钮从上面的div溢出了，只有一半是可见的

Answer 1

关闭 div class="view"可能你的问题就解决了