Question

我正在为我的公司开发一个网站。我遇到了一个布局无法正常工作的问题。底部的页脚部分被覆盖。我添加了一个z-index，它什么都没改变。我玩边缘和填充无济于事。希望有人可以看到导致它被部分覆盖的原因。这是一张显示我看到的图像：

＆＃13;

#slide03.slide .footer-container {
  background-color: #06060d;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  margin-bottom: 0;
  text-align: center;
}
#slide03.slide .footer-container .wrapper {
  background-color: #06060d;
  bottom: 0;
  color: #ffffff;
  left: 0;
  margin: 0 auto -20px;
  padding-top: 5px;
  position: absolute;
  text-align: center;
  text-shadow: none;
  top: auto;
  transform: none;
  width: 100%;
}

＆＃13;

<div class="footer-container">
  <footer class="wrapper">
    <img src="http://clubschoicefundraising.com/Content/img/logo.png" class="center-block" width="80" />
    <h3>
                    Clubschoicemagic.com is affiliated with <a href="http://clubschoicefundraising.com">Club's Choice Fundraising</a>.
                </h3>
  </footer>
</div>

＆＃13;

Answer 1

它实际上与你的CSS无关，因为@Bart帮助我注意到了。

在第200行（你的HTML）你有这个;

    <script type="text/javascript">

        $(document).ready(function () {
            $(".contactForm").on('submit', function (e) {
                e.preventDefault();
                var firstName = $("#firstName").val();
                if (firstName == "") {
                    firstName = "None given";
                }
                var model = { firstName: firstName, schoolName: $("#schoolName").val(), note: $("#note").val() };

                $.ajax({
                    url: "/Home/Index",
                    type: 'POST',
                    data: { model: model },
                    success: function (result) {
                        if (result) {
                            $(".contactForm").trigger('reset');
                            $("#formMessage").html("Thank you.  Your entry has been submitted.");
                        }
                    },
                    error: function (xhr, ajaxOptions, thrownError) {

                    }
                });

            });
        });
    </script>
>

正如您在关闭脚本标记后看到的那样，有一个导致您出现问题的迷路>。

同样margin: 0 auto -20px;应为margin: 0 auto;，因为@Tezekiel说

Answer 2

只需删除此

即可

margin: 0 auto -20px;

来自你的页脚CSS。

页脚的一部分正在隐藏

2 个答案: