我正在为移动浏览器准备我的网站，所以我在 Chrome Dev Tools 上测试了320 x 568大小，我遇到了这个问题。
我的按钮元素位于 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;"></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 溢出，只有一半是可见的