使页脚留在底部[重复]答案

【问题标题】：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 个积分或类似的东西

标签： html css image footer

【解决方案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>

【讨论】：