Question

我有一些单选输入，当其中一个被单击时，将显示一个包含一些信息的div（显示：没有显示，单击后将变为阻塞）。我在页面末尾有一个页脚。当我单击广播时，div出现但与页脚冲突，我希望它停留在页脚和广播之间，但页脚在广播后停留并与出现的div碰撞！

我真的不知道该如何解决。

document.getElementById("radios1").addEventListener("click", function() {
  document.getElementById("eu_listing").style.display = "block";
});

#eu_listing {
  display: none;
}

<div class="form-check-inline mr-3">
  <label class="form-check-label">
                <input type="radio" id="radios1" class="form-check-input" name="optradio">EU
            </label>
</div>

<div id="eu_listing">
  <h1>Sorry, Currently we are out of Stock!</h1>
</div>

<div class="container-fluid px-0 bg-dark">
  <div class="container myfooter text-center">
    <div class="row">
      <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 px-1 text-center mb-2">
        <a href="">ABOUT</a>
      </div>
      <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 px-1 text-center mb-2">
        <a href="">TERMS</a>
      </div>
      <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 px-1 text-center mb-2">
        <a href="">FAQ</a>
      </div>
      <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 px-1 text-center mb-2">
        <a href="">SELL WITH US</a>
      </div>
      <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 px-1 text-center mb-2">
        <a href="">PRIVACY</a>
      </div>
      <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 px-1 text-center mb-2">
        <a href="">ADVERTISING</a>
      </div>
    </div>
    <hr class="footer_divider">
    <h3>CONNECT WITH US</h3>
    <div class="my-4">
      <a href=""><img class="socialpics" src="../Images/fb.png" alt=""></a>
      <a href=""><img class="socialpics" src="../Images/insag.png" alt=""></a>
      <a href=""><img class="socialpics" src="../Images/twit.png" alt=""></a>
    </div>
    <p>© 2019 asfaf</p>
  </div>
</div>

我希望它可以将页脚向下推到所需的最大空间，但根本不会移动页脚！

Answer 1

首先，您需要在<script></script>标签内编写脚本。

接下来，此div首先不需要显示。
<div id="eu_listing" style="display:none">

document.getElementById("radios1").addEventListener("click", function(){
    document.getElementById("eu_listing").style.display = "block";
});

<div class="form-check-inline mr-3">
    <label class="form-check-label">
        <input type="radio" id="radios1" class="form-check-input" name="optradio">EU
    </label>
</div>

<div id="eu_listing" style="display:none">
    <h1>Sorry, Currently we are out of Stock!</h1>
</div>

<div class="container-fluid px-0 bg-dark">
<div class="container myfooter text-center">
    <div class="row">
        <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 px-1 text-center mb-2">
            <a href="">ABOUT</a>
        </div>
        <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 px-1 text-center mb-2">
            <a href="">TERMS</a>
        </div>
        <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 px-1 text-center mb-2">
            <a href="">FAQ</a>
        </div>
        <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 px-1 text-center mb-2">
            <a href="">SELL WITH US</a>
        </div>
        <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 px-1 text-center mb-2">
            <a href="">PRIVACY</a>
        </div>
        <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 px-1 text-center mb-2">
            <a href="">ADVERTISING</a>
        </div>
    </div>
    <hr class="footer_divider">
    <h3>CONNECT WITH US</h3>
    <div class="my-4">
        <a href=""><img class="socialpics" src="../Images/fb.png" alt=""></a>
        <a href=""><img class="socialpics" src="../Images/insag.png" alt=""></a>
        <a href=""><img class="socialpics" src="../Images/twit.png" alt=""></a>
    </div>
    <p>© 2019 asfaf</p>
</div>
</div>

Answer 2

您可以添加designsystem或类似于您要默认隐藏的对象的类，而不是直接修改元素的CSS样式。

CSS

../../artwork

然后在JS中，您可以根据需要添加和删除类，而不必将其更改为:repo_tree

deploy.rb

Answer 3

ok设法通过将页脚设置为“相对”，然后获取出现的div的高度并将该值添加到top：值来进行修复，因此页脚会根据出现的div的大小而变小。

document.getElementById("radios1").addEventListener("click", function(){
document.getElementById("eu_listing").style.display = "block";
document.getElementById("footer").style.top = dheight+"px";

});

用js将“ display：none”改为“ display：block”，使所有div发生碰撞

3 个答案: