我正在尝试使用flexbox创建粘性页脚。我知道还有其他方法，并且随时给我建议更好的方法。我已经使用过其他方法（负边距等），但它们并不像他们需要的那样工作。我也不太关心它是否适用于旧版浏览器，因为它对我来说太小，无法关注我将要运行的网站类型。
网址：https://area51.ulmc.net/theurbexfederation/locations/industrial/technicalcenter/
页脚应该是100％宽度，但在添加flexbox之后，它不是。如果我在页脚上将位置设置为绝对，宽度是正确的，但它会移动到页面顶部。那不是我想要的。
我需要这样做，以便页脚宽度为100％并粘贴到页面底部，同时内容和页脚之间也有一个通用边距。
请注意，上面的页面是一个临时网址。
答案 0 :(得分：0)
从margin: auto移除#footer。 flex儿童的自动保证金有一个整洁的效果，但不是你想在这里使用的。这是一篇很好的文章。 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 © 2017 The Urbex Federation. All Rights Reserved.</p>
</div>
</div>