无论内容长度如何，如何将div固定在页面底部？

时间：2017-11-30 18:07:59

标签： css

无论页面大小如何，我都试图让我的页脚保持不变。但是当关于div侵占时它会被抛出。我希望它显示在about内容上，但是对于要滚动的内容，它太大而无法显示。 这是代码

fiddle 

.footer {
background-color:#FFF;
width: 100%;
border-top: 1px solid #ccc;
padding-top: 1em;
height: 140px; 
display: block;

.about {
font-family: HindMedium;
font-size: 13px;
min-width: 800px;
text-align: left;
width:100%;
min-height: 100%;
margin-bottom: -140px; 
    }

4 个答案:

答案 0 :(得分：0)

您需要清除浮动。将clear:both;添加到.footer。

＆＃13;
＆＃13; 
(function() {

  var img = document.getElementById('container').firstChild;
  img.onload = function() {
    if (img.height > img.width) {
      img.height = '100%';
      img.width = 'auto';
    }
  };

}());
＆＃13; 
* {
  margin: 0;
}

html,
body {
  height: 100%;
}

.footer,
{
  height: 140px;
  display: block;
}

p {
  font-family: HindRegular;
  font-size: 13px;
  font-weight: normal;
  display: block;
  margin-top: 1.5em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

.article {
  float: left;
  font-family: HindRegular;
  width: 21%;
  padding-right: 4%;
  color: #999;
}

.article-right {
  float: left;
  font-family: HindRegular;
  width: 21%;
  padding-left: 4%;
  color: #999;
}

.article-centre {
  float: left;
  font-family: HindRegular;
  width: 21%;
  padding-left: 2%;
  padding-right: 2%;
  color: #999;
}

.blurb {
  font-family: HindMedium;
  font-size: 24px;
  padding-bottom: 100px;
  color: #999;
}

.about {
  font-family: HindMedium;
  font-size: 13px;
  min-width: 800px;
  text-align: left;
  width: 100%;
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -140px;
}

.heading {
  font-family: HindMedium;
  font-size: 24px;
  color: #666;
  margin-top: 1em;
}

.copyright {
  float: left;
}

.contact {
  float: right;
  font-family: HindRegular;
  color: #999;
}

#container {
  width: 100%;
}

#container img {
  width: 100%;
}

h8 {
  font-family: HindRegular;
  color: #999;
  padding-right: 5px;
  font-style: normal;
}

.footer {
  clear: both;
  background-color: #FFF;
  height: 120px;
  width: 100%;
  border-top: 1px solid #ccc;
  padding-top: 1em;
}

a {
  border-bottom: 1px solid #219edf;
  padding: 0;
  margin: 0 0 2px 0;
  clear: both;
  color: #666;
  text-decoration: none;
  font-weight: normal;
  outline: none;
  transition: all .15s ease;
}

.services {
  width: 100%;
}

a:hover {
  text-decoration: none;
  color: #999;
  border-bottom: 1px solid #999;
}

#details {
  color: #666
}

#header {
  color: #999;
}
＆＃13; 
<div class="about">
  <div class="blurb">Stunning Imagery and resourceful imaging
  </div>

  <div class="article">
    <div id="container">
      <img src="http://www.nathanielmcmahon.com/assets/images/about_page/OMA%20cctv%20building_.jpg" alt="CCTV building in Beijing By Rem Koolhaas's OMA" />
    </div>
    <div class="heading">Architectural Photography
    </div>
    <p>Since 2011 Nathaniel has been scaling China's highs and lows documenting it's varied architectural manifestations for a range of western and Local clients. Often a lone cameraman amongst a sea of Chinese hard hats, part of the job has been to negotiate
      sites with little more than a grid reference and reference pictures in inhospitable new cities on the fringes of boom or bust development. Scrambling his way up a half finished sky scrapper fire escapes with little more than a telephone number and
      the name of a contractor called Zhou. In the summer of 2017 he relocated to London. He looks forward to shooting a very different type of architecture back home.
    </p>
  </div>
  <div class="article">
    <div id="container">
      <img src="http://www.nathanielmcmahon.com/assets/images/about_page/Aerial_drone_photography-.jpg" alt="Aerial Photography with UAV drone" />
    </div>
    <div class="heading"> Aerial Services
    </div>
    <p>Large range of services utilizing our fleet of custom built UAS (Unmanned Aerial Systems - AKA drones)</p>
    <p>Registered CAA pilot with commercial flight permissons</p>
    <p>Up to High resolution stills at 42mp and rich 4k full frame video</p>
    <p>Photogrametry - Developing accurately positioned 3D site models up to a 10cm level accuracy</p>
    <p>Agronomy - Crop analysis, multispectral imaging</p>
    <p>&nbsp;</p>

  </div>
  <div class="article-centre">
    <div id="container">
      <img src="http://www.nathanielmcmahon.com/assets/images/about_page/blank.jpg" alt="Verified View image of existing site with proposed building outline." />
    </div>
    <div class="heading">Verified Views
    </div>
    <p>We provide AVR's (Accurate Visual Representations) aka verified views to back up your project proposals with accurate siting in the current landscape.</p>
    <p>We don't outsource the photography or site survey whole process is in house</p>
    <p>Levels of representation from AVR0 - outlining of proposed project to AVR3 - description of architectural form and materials.</p>
  </div>
  <div class="article-right">

    <div id="container">
      <img src="http://www.nathanielmcmahon.com/assets/images/about_page/Rhizome_logo_square.jpg" alt="Architectural Services by Rhizome" />
    </div>
    <div class="heading">Rhizome
    </div>
    <P>Company started in London 2017 to explore and provide bespoke services to small and mid sized architectural firms and developers utilsing emerging technologies in architectural and related fields.</P>
    <P>Comming Soon</P>


  </div>


  <br style="clear: left;" />


</div>
<footer class="footer">

  <div class="article"><span id="header">Contact Details</span>
  </div>
  <div class="article">
    <span id="header">Address</span>
    <br /><span id="details">Nathaniel McMahon Photography<br />
      Maynards Farmhouse<br />
      A21, Lamberhurst QTR<br />
      Kent<br />
      TN3 8AL</span>
  </div>

  <div class="article-centre">
    <span id="header">Mobile</span>&nbsp;&nbsp;&nbsp; <span>+44 (0)7377673765
        </span><br/>
    <span id="header">Email &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <a href="mailto:nathaniel.mcmahon@gmail.com" target="blank">							            nathaniel.mcmahon@gmail.com</a>
  </div>

  <div class="article-right"> Website and all images <br /><span id="details">© 2017 Nathaniel McMahon Photography</span>
  </div>
</footer>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

从 .about 类中删除这些内容。你应该用保证金练习一些。它不会像你尝试使用它一样工作。

min-height: 100%;  
margin-bottom: -140px;

将 clear：both; 添加到页脚声明中。

同时将您的体型从身高更改为 min-height ，以便您的身体可以比浏览器更大。

答案 2 :(得分：0)

您可以在.about和.footer上使用overflow：hidden，这样浮动内容就会保留在这些容器中。您不需要.about上的负边距。如果您试图使页脚停留在页面底部，即使内容很少，您也可以尝试绝对定位页脚。这是下面的一个例子。您需要将所有内容包装在.wrapper或您想要使用的任何名称中。

.wrapper { min-height: 100%; position: relative; }
.article { overflow: hidden; }
.footer { overflow: hidden; position: absolute; bottom: 0; }

内容较少，页脚位于底部： https://jsfiddle.net/suefeng/u4coohpp/1/

内容越多，页脚仍然位于底部： https://jsfiddle.net/suefeng/u4coohpp/3/

如果您希望元素伸出.article和.footer容器，或者只是另一个选项，这里有一个清除浮动的替代解决方案： 您可以删除文章和页脚容器上的浮动，但使用display: inline-block;代替vertical-align: top;。您需要* { box-sizing: border-box; }或将填充更改为边距。

https://jsfiddle.net/suefeng/u4coohpp/4/

还将此添加到页脚，以便电子邮件地址不会进入下一列：

.footer a[href*="mailto"] {
    word-break: break-all;
}

这是一个固定页脚的示例： https://jsfiddle.net/suefeng/gv7Lg3e0/1/ 

.footer {
    position: fixed;
    bottom: 0;
}

答案 3 :(得分：0)

如果您只是尝试将元素固定在页面底部并在其下方滚动内容。你应该使用position：fixed。

如果您像这样更新页脚内容：

.footer {
  background-color: #FFF;
  border-top: 1px solid #ccc;
  padding-top: 1em;
  height: 140px;
  display: block;
  overflow: hidden;
  position: fixed;
  left:0;
  right:0;
  bottom:0;
  clear:both;
}

页脚将固定到底部。在页脚之后还需要一个垫片，以确保滚动条足以将所有内容滚动到视图中。

HTML：

<div class='footer-spacer'></div>

CSS：

.footer-spacer {
    height: 160px;
}

从 .about 类中删除这些内容。当边缘移动元素时，负边距将导致奇怪的行为。 

min-height: 100%;  
margin-bottom: -140px;
相关问题
最新问题