html - 页脚下的绝对 div

Question

当我在 div 下添加一个绝对值的页脚字段时，该字段会在移动设备和桌面设备上转义。此外，iframe 没有全高。我应该怎么办？

附件中提供了所有详细信息。

当我在 div 下添加一个绝对值的页脚字段时，该字段会在移动设备和桌面设备上转义。此外，iframe 没有全高。我应该怎么办？

附件中提供了所有详细信息。

附：

我的代码：

.contact-form {
  position: absolute;
  z-index: 100;
  left: 0;
  right: 0;
  margin-top: 20em;
}

.form {
  background: #fff;
  border-radius: 1em;
  padding: 3em;
}

.maps {
  z-index: 0;
  position: relative;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  width: 100%;
  overflow: hidden;
  margin-bottom: -1em;
}

.maps iframe {
  width: 100%;
  overflow: hidden;
  height: 100vh;
}

<div class="contact-form">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="form  mt-5 mb-5 d-flex flex-md-row flex-column">
          <div class="col-md-5 mt-5">
            <h4>İletişim</h4>
            <div id="title" class="mt-5 d-flex">
              <h6><i class="fas fa-paper-plane mr-2"></i>E-Posta: [e-mail]</h6>
            </div>
            <div id="title" class="mt-4 d-flex">
              <h6><i class="fas fa-phone-alt mr-2"></i>Telefon Numarası: [phone]</h6>
            </div>
            <div id="title" class="mt-4 d-flex">
              <h6><i class="fas fa-sort-numeric-up mr-2"></i>Sicil Numarası: 000010001011111100</h6>
            </div>
            <div id="title" class="mt-4 d-flex">
              <h6><i class="fas fa-sort-numeric-down mr-2"></i>Mersis Numarası: 000010001011111100</h6>
            </div>

            <p class="mt-5" style="color: #939393;"><i class="fas fa-map-marker mr-2" style="color: #0097b1;"></i>Küçükbakkalköy Mh. Küçük Setli Sokak Denge Panorama Plaza. No: 5-9 Kat: 3 D:13 34750, Ataşehir - İstanbul</p>
          </div>

          <div class="col-md-7 mt-5 mb-4">
            <div class="d-block">
              <div class="input-group mb-3 mr-2">
                <input type="text" class="form-control" placeholder="Adınız Soyadınız" aria-label="ad-soyad" aria-describedby="basic-addon1">
              </div>

              <div class="input-group mb-3">
                <input type="text" class="form-control" placeholder="E-Posta" aria-label="e-mail" aria-describedby="basic-addon1">
              </div>
            </div>

            <div class="form-group">
              <label for="exampleFormControlTextarea1"></label>
              <textarea placeholder="Mesajınız" class="form-control" id="exampleFormControlTextarea1" rows="10"></textarea>
            </div>
            <a href="#"><button style="width: 100%;" type="button" class="btn btn-sincap"><i class="far fa-paper-plane mr-2"></i>Gönder</button></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>



<div class="maps">
  <div class="row">
    <div class="col-md-12">
      <iframe class="map_h" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d24095.133376834387!2d29.11235246540525!3d40.98385285407077!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x2e8746b0ec51372a!2sReklam%20Odas%C4%B1!5e0!3m2!1str!2str!4v1595930989510!5m2!1str!2str"
        frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
    </div>
  </div>
</div>


<div class="footer pb-5 text-center">
  <div class="container">
    <div class="row">
      <div class="col-md-12 copy">
        <img src="/materials/logo.svg" width="90px" height="90px">
      </div>
      <div class="col-md-12">
        <p>All Rights Reserved 2020 | Reklam Odası</p>
      </div>
    </div>
  </div>
</div>

非常感谢，这有点用，但这次看起来像这样。维卡斯·卡塔尔

标签： htmlcssfooterabsolute

Answer 1

当您绝对一个元素相对于另一个元素时，尝试用父元素包装两者。它将自动解决您将来可能面临的许多问题。

<div class="form-map-wrapper">
    <div class="contact-form">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="form  mt-5 mb-5 d-flex flex-md-row flex-column">
                        <div class="col-md-5 mt-5">
                            <h4>İletişim</h4>
                            <div id="title" class="mt-5 d-flex"><h6><i class="fas fa-paper-plane mr-2"></i>E-Posta: [e-mail]</h6></div>
                            <div id="title" class="mt-4 d-flex"><h6><i class="fas fa-phone-alt mr-2"></i>Telefon Numarası: [phone]</h6></div>
                            <div id="title" class="mt-4 d-flex"><h6><i class="fas fa-sort-numeric-up mr-2"></i>Sicil Numarası: 000010001011111100</h6></div>
                            <div id="title" class="mt-4 d-flex"><h6><i class="fas fa-sort-numeric-down mr-2"></i>Mersis Numarası: 000010001011111100</h6></div>

                            <p class="mt-5" style="color: #939393;"><i class="fas fa-map-marker mr-2" style="color: #0097b1;"></i>Küçükbakkalköy Mh. Küçük Setli Sokak
                            Denge Panorama Plaza. No: 5-9 Kat: 3 D:13 34750, Ataşehir - İstanbul</p>
                        </div>
                        
                        <div class="col-md-7 mt-5 mb-4">
                            <div class="d-block">
                                <div class="input-group mb-3 mr-2">
                                    <input type="text" class="form-control" placeholder="Adınız Soyadınız" aria-label="ad-soyad" aria-describedby="basic-addon1">
                                </div>
                                
                                <div class="input-group mb-3">
                                    <input type="text" class="form-control" placeholder="E-Posta" aria-label="e-mail" aria-describedby="basic-addon1">
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label for="exampleFormControlTextarea1"></label>
                                <textarea placeholder="Mesajınız" class="form-control" id="exampleFormControlTextarea1" rows="10"></textarea>
                            </div>
                            <a href="#"><button style="width: 100%;" type="button" class="btn btn-sincap"><i class="far fa-paper-plane mr-2"></i>Gönder</button></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="maps">
        <div class="row">
            <div class="col-md-12">
                <iframe class="map_h" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d24095.133376834387!2d29.11235246540525!3d40.98385285407077!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x2e8746b0ec51372a!2sReklam%20Odas%C4%B1!5e0!3m2!1str!2str!4v1595930989510!5m2!1str!2str" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
            </div>
        </div>
    </div>
</div>

还要明智地将z-index添加到相对和绝对元素，因为它可能对其他元素产生不良影响（例如：- 对于固定菜单）

.form-map-wrapper {
    position: relative;
    z-index: 1;
}

.maps {
    position: absolute;
    z-index: 1;
}