Question

如何使页脚宽度覆盖浏览器窗口的整个宽度？

注意：我正在使用Bootstrap，Footer使用'container-fluid'但页面内容使用'container'。

直播链接： http://185.123.96.102/~kidsdrum/moneynest.co.uk/blog.html

HTML

<footer class="container-fluid" style="margin-top: 30px;"> 
  <div class="row">
    <div class="col-sm-7 footercta">
  <h4 class="bottomoffer">Sign up to access your free Jumpstart your Finances email course:</h4>
<div id="mc_embed_signup2">
    <div id="mc_embed_signup_scroll">




<div id="mlb2-2024903" class="ml-subscribe-form ml-subscribe-form-2024903">
    <div class="ml-vertical-align-center">
        <div class="subscribe-form ml-block-success" style="display:none">
            <div class="form-section">
                <h4></h4>
                <p>Success!</p>
            </div>
        </div>
        <form class="ml-block-form" action="//app.mailerlite.com/webforms/submit/i4m1h1" data-code="i4m1h1" method="POST" target="_blank">
            <div class="subscribe-form">
                <div class="form-section">
                    <h4></h4>
                    <p></p>
                </div>
                <div class="form-section">
                    <div class="form-group ml-field-email ml-validate-required ml-validate-email">
                        <input type="email" name="fields[email]" class="form-control" placeholder="Email*" value="" id="footer-cta-input">
                    </div>
                </div>
                <input type="hidden" name="ml-submit" value="1" />
                <button type="submit" class="text-uppercase btn btn-primary btn-lg btn-bottom primary gradient-on">
                    Start Class Now
                </button>
                <button disabled="disabled" style="display: none;" type="button" class="loading gradient-on">
                    <img src="//static.mailerlite.com/images/rolling.gif" width="20" height="20" style="width: 20px; height: 20px;">
                </button>
            </div>
        </form>
        <script>
            function ml_webform_success_2024903() {
                jQuery('.ml-subscribe-form-2024903 .ml-block-success').show();
                jQuery('.ml-subscribe-form-2024903 .ml-block-form').hide();
            };
        </script>
    </div>
</div></div>
<script type="text/javascript" src="//static.mailerlite.com/js/w/webforms.js?v25"></script>


    </div> </div>
    <div class="col-sm-5 footerlinks">
    <br>
    <ul class="mylist">
          <li><a href="/">Home</a></li>
    <li><a href="/blog.html">Blog</a></li>
  <li><a href="/about.html">About</a></li>
  <li><a href="/contact.html">Contact</a></li>
    </ul>
    <ul class="mylist2">
  <li><a href="https://www.facebook.com/ukmoneynest/">Facebook</a></li>
  <li><a href="https://twitter.com/ukmoneynest">Twitter</a></li>

    </ul>
  </div>

  </div>
  <br> 
  <br>
   <div class="finalfooterlinks"><p>
  <a href="/privacy-policy.html">Privacy Policy</a> | <a href="/terms-and-conditions.html">Terms of Service</a></p>

  <p>&copy; Copyright 2015 -
<script type="text/javascript">
    now = new Date
    theYear=now.getYear()
    if (theYear < 1900)
    theYear=theYear+1900
    document.write(theYear)
</script></div>
<br>

</footer>

Answer 1

footer位于.container内1170px width。

所以你只需要把它从这里拿出来。

Answer 2

这是你想要的吗？

<div class="container">
    <p>Your content goes here</p>
</div>

<footer class="footer">
      <div class="container">
          <p>Your footer content here.</p>
      </div>
</footer>

Answer 3

另一种解决方案如果您不想将页脚移到容器外部，只需将此css添加到您的代码中：

footer {
position: relative;
width: 100vw;
left: calc(-50vw + 50%);}

这将使页脚具有100％的视口宽度，并将子元素50％的视口宽度 - 减去父元素宽度的50％ - 向左移动，使其符合屏幕边缘。我在这里找到了这个答案：Is there are way to make a child DIV's width wider than the parent DIV using CSS?。

希望得到这个帮助。

Answer 4

如果您将页脚移到div.container之外，并且直接在div.container之后，它将跨越浏览器窗口的全宽。

尽管主体容器不流动，但使页脚全宽（容器 - 流体）

4 个答案: