2017-04-10 11 views
0

フレックスボックスでスティッキーフッタを作成しようとしています。私は他の方法があることを知っています、そして、より良い方法のための私に勧告を与える気にしないでください。私は他の方法(負のマージンなど)を使用しており、必要なように機能しません。また、私が実際に実行しているサイトの種類を気にする人口統計があまりにも小さいため、従来のブラウザでも動作するよう気にする必要はありません。CSSスティッキーフッタがフレックスボックスで動作しない

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

フッターが100%の幅にする必要がありますが、フレキシボックスを追加した後、そうではありません。フッタに絶対位置を設定すると、幅は正しいが、ページの上部に移動する。それは私が望むものではありません。

フッターの幅が100%で、ページの下部に貼り付けるようにする必要がありますが、コンテンツとフッターの間には余白があります。

上記のページは一時的なURLであることにご注意ください。

+0

将来的には私たちに好意を行うと*ポスト自体に関連するHTML/CSSの*をしてくださいます。 SOの目標はあなたの問題を解決することだけではありません。主な目的は、誰かが「フレックスボックスと一緒に働いている私のべとべらのフッターはなぜですか?!?!?!」と検索したときの、この時点からです。彼らはこのポストに着陸するでしょう。あなたが参照したコードのすべてが一時的なURL、つまり変更されるサードパーティのサイトにある場合、この投稿はそのユーザーにとって無意味になり、ここでそのポイントを奪います。私のように、あなたのためにその仕事をする必要はありません。あなたは助けを求めている人です。あなたができることは、少なくともあなたです:) –

+1

私はあなたがそれをしたことに気付きました。ごめんなさい。私は次回それをすることを確認します。 – OpFor

答えて

0

#footerから削除します。フレックスチャイルドの自動マージンはきちんとした効果がありますが、あなたがここで使いたいものはありません。ここには良い記事があります。 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>

+0

ありがとうございます。これは解決したようですが、私はフレックスボックスがこれをしたことを知らなかったのです。私は彼らのコンセプトにはかなり新しいです。 私の最後の問題は、フッターとコンテンツの間の一番上のマージンです。最大化すると、フッターとコンテンツの間のマージンは、私がそれが欲しいと思う方法です。しかし、小さな画面では、コンテンツは私が望むよりもはるかにフッタに近づきます。どのようにこれをユニバーサル/一貫性のあるものにするかに関する考え? – OpFor

+0

@OpFor *「最大化すると、フッターとコンテンツの間のマージンが好きです。しかし、小さな画面では、コンテンツは私が望むよりもフッターに近いものになります。」*あなたのモニター/ブラウザーがどのように見えているのか、それがどのように見えるのかわからないので、これは私には多少意味がありません。 #フッタでもっと大きなマージントップを使うのはなぜですか?今は '5px'です。 –

+0

私のせいです。一定。私は間違ったコードを見ていました。なぜ私の証拠金の増加がちょうど適用されなかったのだろうと思っていた。あなたの助けをもう一度ありがとう。 – OpFor

関連する問題