使页脚留在底部[重复]

Posted

技术标签:

【中文标题】使页脚留在底部[重复]【英文标题】：Make Footer stay on bottom [duplicate] 【发布时间】：2016-09-25 04:03:59 【问题描述】：

我认为我的编码是正确的，但我仍然无法将页脚放在页面底部，我真的需要这样做。

结果的页脚直接出现在标题下方，这很烦人，因为我希望它进入位于我的body 中的主要div。

谢谢。 :)

<!DOCTYPE html>
<html>
    <head>
        <title>Gallery</title>
        <link type="text/css" rel="stylesheet" href="mobile.css"/>
    </head>

    <body>
        <div id="header">
           <div id="companyname">Shutter Up Photography</div>
           <div id="nav">
               <ul>
                   <li><a href="contactus.html">Contact Us</a></li>
                   <li><a href="experience.html">Experience</a></li>
                   <li><a href="offers.html">Offers</a></li>
                   <li><a href="gallery.html">Gallery</a></li>
                   <li><a href="location.html">Location</a></li>
                   <li><a href="aboutus.html">About Us</a></li>
                   <li><a href="home.html">Home</a></li>
               </ul>
           </div>
       </div>

       <div id="main">
           <div id="content">
               <div class="img">
                   <img src="img_model.jpg"/>
                   <div class="desc">Model Shot</div>
               </div>

               <div class="img">
                   <img src="img_classy.jpg"/>
                   <div class="desc">A classy family shot</div>
               </div>

               <div class="img">
                   <img src="img_father.jpg"/>
                   <div class="desc">A father and his boys</div>
               </div>

               <div class="img">
                   <img src="img_wedding.jpg"/>
                   <div class="desc">Timeless Wedding Shot</div>
               </div>

               <div class="img">
                   <img src="img_mother.jpg"/>
                   <div class="desc">A mother and her children</div>
               </div>

               <div class="img">
                   <img src="img_kid.jpg"/>
                   <div class="desc">Imaginative Kid</div>
               </div>
           </div>
       </div>

       <div id="footer">
           <div id="companyname">Shutter Up Photography</div>
      </div>
    </body>
</html>

This is the result from my coding, I've tried to put the css gallery into the main div, but won't work

This is my css code for it

【问题讨论】：

请将您的 CSS 添加为代码（不是图片） - 您可以编辑您的问题并添加另一个 code 块 尝试使用 flexbox 布局页面区域：css-tricks.com/snippets/css/a-guide-to-flexbox 请将您的 CSS 代码添加到帖子本身，而不仅仅是链接。 在此处发布您的 CSS，而不是在图片中。我用你的 HTML 为你创建了一个 jsfiddle。输入您的 CSS，我们将从那里开始。 jsfiddle.net/zsL3ww9j 我不能只添加图片，因为这个网站说我需要 10 个积分或类似的东西 【参考方案1】：

这是因为您的图像是浮动的，这会将它们带出页面流。

试试这个

div div div.img 
  margin: 5px;
  border: 2px solid blue;
  display: inline-block;
  width: 400px;

通过删除浮动并替换为内联块，您可以将元素保留在页面流中。

编辑 -

HTML -

<div class="img">
    <img/>

</div><div class="img">
    <img/>

</div><div class="img">
    <img/>

</div>

如果您选择使用 inline-block，请像这样对 html 进行分层，因为 inline-block 元素会考虑元素之间的空白。

**/ 编辑**

或者如果你想保持浮动，创建一个 clearfix 类并将其附加到父级

.clearfix:after 
  content: "";
  display: table;
  clear: both;

编辑-

<div id="content" class="clearfix">
    <!-- your floated divs here -->
</div>

【讨论】：

谢谢马克会尝试。 嘿，马克，即使我做了内联块元素以将其与页面的流动相结合，我怎样才能让它看起来像以前一样 3x2 画廊？？ 请检查我的编辑 :) @M.Park 如果我保留浮动，但元素只是随页面流并堆叠在一列中，我该如何将它们显示为 3x2 外观。 @M.Park 如果 Mark 的回答解决了问题，请将其标记为这样。然后，针对剩余的问题提出单独的问题【参考方案2】：

添加具有以下 CSS 属性的包装器，如下面的代码所示。这应该可以解决问题：

html,
body 
  height: 100%;

#wrap 
  min-height: 100%;

#main 
  overflow: auto;
  padding-bottom: 150px;
  /* must be same height as the footer */

#footer 
  position: relative;
  margin-top: -150px;
  /* negative value of footer height */
  height: 150px;
  border-bottom-style: solid;
  clear: both;
  background-color: #006BFE;
  border: 2px solid red;
  /* remove border, showns for illustration purposes only */

div.img 
  margin: 5px;
  display: inline-block;
  width: 400px;
  border: 1px solid blue;  
    padding: 10px;

div.img img 
  width: 100%;
  height: auto;
  border: 2px solid #006bFE;  


div.desc 
  padding: 15px;
  text-align: center;

.somelist 
  list-style-type: square;
  list-style-position: inside;
  float: none;
  line-height: 1.5em;
  background-color: #93dbfe;

<div id="wrap">
  <div id="header">
    <div id="companyname">Shutter Up Photography</div>
    <div id="nav">
      <ul>
        <li><a href="contactus.html">Contact Us</a>
        </li>
        <li><a href="experience.html">Experience</a>
        </li>
        <li><a href="offers.html">Offers</a>
        </li>
        <li><a href="gallery.html">Gallery</a>
        </li>
        <li><a href="location.html">Location</a>
        </li>
        <li><a href="aboutus.html">About Us</a>
        </li>
        <li><a href="home.html">Home</a>
        </li>
      </ul>
    </div>
  </div>

  <div id="main">
    <div id="content">
      <div class="img">
        <img src="http://lorempixel.com/300/300/people" />
        <div class="desc">Model Shot</div>
      </div>

      <div class="img">
        <img src="http://lorempixel.com/300/300/people" />
        <div class="desc">A classy family shot</div>
      </div>

      <div class="img">
        <img src="http://lorempixel.com/300/300/people" />
        <div class="desc">A father and his boys</div>
      </div>

      <div class="img">
        <img src="http://lorempixel.com/300/300/people" />
        <div class="desc">Timeless Wedding Shot</div>
      </div>

      <div class="img">
        <img src="http://lorempixel.com/300/300/people" />
        <div class="desc">A mother and her children</div>
      </div>

      <div class="img">
        <img src="http://lorempixel.com/300/300/people" />
        <div class="desc">Imaginative Kid</div>
      </div>
    </div>
  </div>
</div>
<div id="footer">
  <div id="companyname">Shutter Up Photography</div>
</div>

【讨论】：

以上是关于使页脚留在底部[重复]的主要内容，如果未能解决你的问题，请参考以下文章

CSS：即使在滚动时也使页脚始终位于页面底部

如何使页脚视图始终位于 UITableViewController 的底部？

无法使页脚转到页面底部

CSS 使页脚粘贴到页面的底部

获取页脚留在页面底部[重复]

页面内容不足时如何使页脚移至底部