Pied de page collant CSS ne fonctionne pas w/flexbox

Je tente de créer un pied de page collant avec flexbox. Je sais qu'il existe d'autres méthodes, et n'hésitez pas à me donner des recommandations pour de meilleures méthodes. J'ai utilisé d'autres méthodes (marges négatives, etc.) et elles ne fonctionnent pas comme elles le devraient. Je ne m'inquiète pas non plus de le faire fonctionner avec les navigateurs existants, vu qu'il est trop petit pour que je me soucie du type de site que je vais utiliser.Pied de page collant CSS ne fonctionne pas w/flexbox

URL: https://area51.ulmc.net/theurbexfederation/locations/industrial/technicalcenter/

Le pied de page doit être de 100% de sa largeur, mais après avoir ajouté FlexBox, ce n'est pas. Si je positionne la position sur absolute sur le pied de page, la largeur est correcte, mais ensuite elle se déplace vers le haut de la page. Ce n'est pas ce que je veux.

Je dois faire en sorte que le pied de page soit à 100% de largeur et qu'il colle au bas de la page, tout en ayant une marge universelle entre le contenu et le pied de page.

Veuillez garder à l'esprit que la page ci-dessus est une URL temporaire.

Source

2017-04-10 OpFor

nous faire une faveur à l'avenir et comprennent le * html/css pertinente dans le poste lui-même * s'il vous plaît. Le but de SO n'est pas seulement de résoudre votre problème. Le but principal est à partir de ce moment, quand quelqu'un cherche "pourquoi mon pied collant ne fonctionne-t-il pas avec flexbox?!?!?!" ils atterriront sur ce post. Et si tout le code que vous avez référencé se trouve sur une URL temporaire, un site tiers qui va changer, ce message n'aura aucune signification pour ces utilisateurs, ce qui l'empêchera de l'avoir ici. Je ne devrais pas avoir à faire ce travail pour vous, comme je l'ai fait. Tu es celui qui demande de l'aide, c'est le moins que tu puisses faire :) –

J'ai remarqué que tu as fait ça. Pardon. Je ferai en sorte de le faire la prochaine fois. – OpFor

Supprimer margin: auto de #footer. Une marge automatique sur un enfant flexible a un effet net, mais pas ce que vous voulez utiliser ici. Voici un bon article à ce sujet. https://medium.com/@samserif/flexbox-s-best-kept-secret-bd3d892826b6

#footer { 
 
    margin: 0!important; 
 
}

<base href="https://area51.ulmc.net/theurbexfederation/locations/industrial/technicalcenter/"> 
 
<head> 
 
    <title>The Urbex Federation | Technical Center</title> 
 
     <link rel="stylesheet" type="text/css" href="../../../assets/css/styles.css"> 
 
    <link rel="stylesheet" type="text/css" href="../../../assets/css/responsive.css"> 
 
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700"> 
 
    <link rel='shortcut icon' type='image/x-icon' href='../../../assets/img/favicon.ico'/> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 
 
    <script src="../../../assets/js/galleria/galleria-1.5.5.min.js"></script> 
 
    <script> 
 
     Galleria.loadTheme('../../../assets/js/galleria/themes/classic/galleria.classic.min.js'); 
 
     Galleria.run('.galleria', { 
 
      transition: 'fade', 
 
      imageCrop: true 
 
     }); 
 
    </script></head> 
 
<body> 
 
    <div class="container"> 
 
       <div class="content"> 
 
      <div class="galleria"> 
 
       <img src="img/1.jpg" data-description="Shipping/receiving area behind GSI Lumonics"> 
 
       <img src="img/2.jpg"> 
 
       <img src="img/3.jpg" data-description="Vandals had broken a few of the windows. It had rained pretty hard, letting in a ton of water"> 
 
       <img src="img/4.jpg"> 
 
       <img src="img/5.jpg"> 
 
       <img src="img/6.jpg"> 
 
       <img src="img/7.jpg"> 
 
       <img src="img/8.jpg"> 
 
       <img src="img/9.jpg" data-description="Power room. Most of the equipment had been ripped out."> 
 
       <img src="img/10.jpg" data-description="Main floor area for GSI. Hard to know if this was a showroom or office area"> 
 
       <img src="img/11.jpg"> 
 
       <img src="img/12.jpg"> 
 
       <img src="img/13.jpg"> 
 
       <img src="img/14.jpg"> 
 
       <img src="img/15.jpg"> 
 
       <img src="img/16.jpg"> 
 
       <img src="img/17.jpg"> 
 
       <img src="img/18.jpg" data-description="GSI lobby area"> 
 
       <img src="img/19.jpg"> 
 
       <img src="img/20.jpg" data-description="The only other standing building. Appeared to be a testing facility for Magna"> 
 
       <img src="img/21.jpg"> 
 
       <img src="img/22.jpg"> 
 
       <img src="img/23.jpg"> 
 
       <img src="img/24.jpg"> 
 
       <img src="img/25.jpg"> 
 
       <img src="img/26.jpg"> 
 
       <img src="img/27.jpg"> 
 
       <img src="img/28.jpg" data-description="The whole office looked like it had been untouched for a long time. Everything was coated in a thick layer of dust"> 
 
       <img src="img/29.jpg"> 
 
       <img src="img/30.jpg"> 
 
       <img src="img/31.jpg"> 
 
       <img src="img/32.jpg"> 
 
       <img src="img/33.jpg"> 
 
       <img src="img/34.jpg" data-description="Discarded testing equipment along with a fax machine"> 
 
       <img src="img/35.jpg"> 
 
       <img src="img/36.jpg" data-description="A hole in the wall led into another unit for an energy company"> 
 
       <img src="img/37.jpg"> 
 
       <img src="img/38.jpg"> 
 
       <img src="img/39.jpg"> 
 
       <img src="img/40.jpg"> 
 
       <img src="img/41.jpg"> 
 
       <img src="img/42.jpg" data-description="An empty office area for the energy company. Lots of office furniture just left behind"> 
 
       <img src="img/43.jpg"> 
 
       <img src="img/44.jpg"> 
 
       <img src="img/45.jpg"> 
 
       <img src="img/46.jpg"> 
 
       <img src="img/47.jpg"> 
 
       <img src="img/48.jpg"> 
 
       <img src="img/49.jpg"> 
 
       <img src="img/50.jpg" data-description="Magna offices. This area appeared to have been used much more recently than the other section of the office"> 
 
       <img src="img/51.jpg"> 
 
       <img src="img/52.jpg"> 
 
       <img src="img/53.jpg"> 
 
       <img src="img/54.jpg"> 
 
       <img src="img/55.jpg" data-description="DMARC room for the phone, security, and internet systems"> 
 
       <img src="img/56.jpg" data-description="The security system was still running off its backup battery, but the service had been cut off. A loud warning alarm echoed throughout the building during this exploration"> 
 
       <img src="img/57.jpg"> 
 
       <img src="img/58.jpg"> 
 
       <img src="img/59.jpg" data-description="The complex is located right next to a Costco. It was unnerving being so close to activity"> 
 
       <img src="img/60.jpg" data-description="Receiving area for an autobody manufacturing company behind Magna"> 
 
       <img src="img/61.jpg" data-description="Company documents were carelessly discarded"> 
 
       <img src="img/62.jpg"> 
 
       <img src="img/63.jpg"> 
 
       <img src="img/64.jpg"> 
 
       <img src="img/65.jpg"> 
 
       <img src="img/66.jpg" data-description="Second building, home to the testing area for Magna"> 
 
       <img src="img/67.jpg"> 
 
       <img src="img/68.jpg"> 
 
       <img src="img/69.jpg"> 
 
       <img src="img/70.jpg" data-description="Partially demolished in preparation for redevelopment"> 
 
       <img src="img/71.jpg"> 
 
       <img src="img/72.jpg" data-description="Lots of random items in this building"> 
 
       <img src="img/73.jpg"> 
 
       <img src="img/74.jpg" data-description="A gym may have occupied the vacant Magna building for a short time, based on many of the items left behind"> 
 
       <img src="img/75.jpg" data-description="Lockers with an unusual choice of material"> 
 
       <img src="img/76.jpg"> 
 
       <img src="img/77.jpg"> 
 
       <img src="img/78.jpg" data-description="Office area"> 
 
       <img src="img/79.jpg" data-description="Homeless people were/are camping in the empty offices"> 
 
       <img src="img/80.jpg"> 
 
       <img src="img/81.jpg"> 
 
       <img src="img/82.jpg"> 
 
       <img src="img/83.jpg"> 
 
       <img src="img/84.jpg"> 
 
       <img src="img/85.jpg"> 
 
       <img src="img/86.jpg"> 
 
       <img src="img/87.jpg"> 
 
       <img src="img/88.jpg"> 
 
       <img src="img/89.jpg"> 
 
      </div> 
 
      <h1>Technical Center</h1> 
 
       <p>Opening in the early 1980s, this technical center and office complex was home primarily to 
 
       automotive testing, vision and laser manufacturing, as well as many other businesses in other 
 
       industries. The complex was comprised of 3 separate buildings, split into many different units.</p> 
 
       <br /> 
 
       <p>The center remained at almost max occupancy until the mid-2000s, when companies began moving out 
 
       due to outgrowing the size of the facility. The eventual recession didn't help at all, and the 
 
       center continued to lose tenants. The nail in the coffin for the center was when the largest tenant, 
 
       Magna Automotive, moved to another facility. After this, a few smaller businesses occupied the facilities, 
 
       but the complex was still mostly empty. In 2013, the last tenant moved to a different facility, putting 
 
       the complex at 100% vacancy.</p> 
 
       <br /> 
 
       <p>Shortly after, the developer of the site announced plans for a new marketplace and shopping center that would 
 
       make use of the existing structures. As part of this plan, one building and a quarter of another were torn 
 
       down. No new development has happened at the site since. Electricity and other services were cutoff shortly 
 
       before the partial demolition, and the interiors of the remaining buildings are gradually decaying as a result. 
 
       The center will hopefully see a brighter future, but for now, it remains vacant and exposed to the elements.</p> 
 
      </div> 
 
    </div> 
 
    <div id="footer"> 
 
    <div id="footer-logo"> 
 
     <img src="../../../assets/img/logo-whitebg.png"> 
 
    </div> 
 
    <div id="copyright-text"> 
 
     <p>Copyright &copy; 2017 The Urbex Federation. All Rights Reserved.</p> 
 
    </div> 
 
</div>

Source

2017-04-10 23:45:59

Merci. Cela semble l'avoir résolu, je n'étais jamais au courant que les flexbox faisaient cela. Je suis assez nouveau pour le concept d'entre eux. Mon dernier problème est la marge supérieure entre le pied de page et le contenu. Lorsqu'elle est maximisée, la marge entre le pied de page et le contenu est exactement ce que je voudrais qu'elle soit. Cependant, sur des écrans plus petits, le contenu se rapproche beaucoup plus du pied de page que je ne le souhaiterais. Toute idée sur la façon de rendre cela universel/cohérent? – OpFor

@OpFor * "Lorsque la marge est maximisée, la marge entre le pied de page et le contenu correspond exactement à ce que je souhaiterais, mais sur les petits écrans, le contenu se rapproche beaucoup plus du pied de page que je ne le souhaiterais. Tout cela n'a pas de sens pour moi, car je ne sais pas à quoi ressemble votre moniteur/navigateur et à quoi il ressemble. Pourquoi n'utilisez-vous pas un plus grand 'margin-top' sur' # footer'? C'est '5px' maintenant. –

ma faute. Fixé. Assez sûr que je regardais le mauvais ensemble de code. Je me demandais pourquoi mes augmentations de marge ne s'appliquaient tout simplement pas. Merci encore pour votre aide. – OpFor

Pied de page collant CSS ne fonctionne pas w/flexbox

Répondre

Questions connexes