css - 我在div中的最后一个元素溢出,因此只有一半的元素可见

原文 标签 css mobile bootstrap-4 mdbootstrap

我正在为移动浏览器准备网站,因此在Chrome Dev Tools上我已经测试过320 x 568的尺寸,并且遇到了这个问题。

我的按钮元素位于div的底部,但按钮的一半可见,而另一半则不可见。

Screenshot on the situation

我尝试设置背景样式(background-size等),但是更改并不能解决问题。

解决此问题的基本文档/建议是什么?

家长分部

<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>


孩子

<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>




问题导致“视图”类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溢出了,只有一半可见

最佳答案

关闭div class =“ view”可能是您解决的问题

相关文章:

javascript - D3js单横杠三种颜色

jquery - EA手机游戏网站有疑问吗?

css - 如果div position设置为relative且div:before position设置为absolute,则div:before相对于div定位吗? [重复]

jquery - 页面刷新后维护动态分配的CSS类

javascript - 如何使网格位于背景上?

jquery - 固定位置的浮动菜单以支持移动浏览器

css - 链接不可点击,只能在移动设备上长按

javascript - 如何一张一张地给Bootstrap 4卡制作动画?

html - Bootstrap 4.1.1横幅图片和导航栏未全宽

html - Bootstrap 4 navbar-inverse没有颜色