Make Footer volle Breite (Container-Flüssigkeit) trotz Körperbehälter nicht flüssig

Question

Wie kann ich meine Footer Breite über die gesamte Breite des Browser-Fensters abdecken?

Hinweis: Ich benutze Bootstrap, die Fußzeile verwendet 'Container-Flüssigkeit', aber der Seiteninhalt verwendet 'Container'.

Live-Link: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

Ihre footer ist innerhalb einer .container, die eine 1170pxwidth hat.

So müssen Sie nur hier raus.

Answer 2

Wenn Sie Ihre Fußzeile außerhalb bewegen, und direkt nach div.container, wird es die gesamte Breite des Browserfensters umspannen .

Answer 3

Ist es das, was Sie wollen?

<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 4

Eine andere Lösung, wenn Sie möchten, die Fußzeile außerhalb des Behälters bewegen sich nicht, fügen Sie einfach diesen CSS Code:

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

Dies wird Fußzeile haben 100% der Darstellungsbreite machen, und verschieben Sie das untergeordnete Element 50% der Breite des Darstellungsbereichs - minus 50% der Breite des übergeordneten Elements - nach links, damit es den Rand des Bildschirms erreicht. Ich habe diese Antwort hier gefunden: Is there are way to make a child DIV's width wider than the parent DIV using CSS?.

Hoffe diese Hilfe.