Question

我的页脚似乎不想坐在.wrapper下面。

我最接近让它从页面顶部取消合并，就是告诉它是bottom: 0px，但它在页面中间笨拙地坐着。

clear:both也没有用。

我担心这可能是jssor JavaScript中的一些东西搞砸了。

#slider1_container {
  position: absolute;
  float: right;
  top: 50px;
  left: 40%;
  width: 60%;
  height: 900px;
  background: #333;
  overflow: hidden;
}
.wrapper {
  position: absolute;
  width: 100%;
  background-color: #404041;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -142px;
}
footer {
  position: absolute;
  display: block;
  width: 100%;
  background-color: #feede4;
  height: 250px;
}

<body>
  <div class="wrapper">
    <div id="slider1_container">
      <!-- Loading Screen -->
      <div class="loading" u="loading">
        <div class="loadingStyle1"></div>
        <div class="loadingStyle2"></div>
      </div>
      <!-- Images -->
      <div u="slides" class="slides">
        <div>
          <img u="image" src="images/hotel/full/image-29.jpg" />
          <img u="thumb" src="images/hotel/thumbnail/image-29.jpg" />
        </div>
        <div>
          <img u="image" src="images/hotel/full/image-30.jpg" />
          <img u="thumb" src="images/hotel/thumbnail/image-30.jpg" />
        </div>
        <div>
          <img u="image" src="images/hotel/full/image-31.jpg" />
          <img u="thumb" src="images/hotel/thumbnail/image-31.jpg" />
        </div>
        <div>
          <img u="image" src="images/hotel/full/image-32.jpg" />
          <img u="thumb" src="images/hotel/thumbnail/image-32.jpg" />
        </div>
        <!-- Arrow Left --> <span u="arrowleft" class="jssora05l" style="top: 158px; left: 248px;">
                </span>

        <!-- Arrow Right --> <span u="arrowright" class="jssora05r" style="top: 158px; right: 8px">
                </span>

        <!-- thumbnail navigator container -->
        <div u="thumbnavigator" class="jssort02" style="left: 0px; bottom: 0px;">
          <!-- Thumbnail Item Skin Begin -->
          <div u="slides" style="cursor: default;">
            <div u="prototype" class="p">
              <div class=w>
                <div u="thumbnailtemplate" class="t"></div>
              </div>
              <div class=c></div>
            </div>
          </div>
          <!-- Thumbnail Item Skin End -->
        </div>
      </div>
      <div class="push"></div>
    </div>
    <footer>jasoldk;as'dlas'd</footer>
  </div>
</body>

http://jsfiddle.net/cowc1uv1/

Answer 1

您有两种样式导致#slide1_container出现问题：

#slider1_container{
    position: absolute;
    float: right;
    top: 50px;
    left: 40%;
    width: 60%;
    height: 900px;
    background: #333;
    overflow: hidden;
    }

漂浮和绝对定位的东西没有意义。但是任何一个都会导致布局中的下一个元素出现问题。如果您绝对定位某些内容，则将其从布局流程中完全删除。因此，对于后续元素，它实际上没有高度（因此您的页脚显示在顶部）。如果浮动元素，则必须“清除浮动”。一种方法是在容器元素上使用clearfix。您还需要从页脚中删除position:absolute。

您的徽标和颜色看起来不错......如果您学习了一些基本的CSS布局技巧，尤其是how the various values for position really work，您将节省自己在构建网站时的挫败感和时间。

Answer 2

正如您在问题中提到的那样position: absolute和bottom: 0，您的footer元素确实下降到其绝对定位的容器的底部（{ {1}}），正如它应该的那样。

您在页脚下方的剩余差距所带来的问题涉及div class="wrapper"。请参阅div id="slider1_container和height: 1046.51955032362px属性。尝试在Chrome开发者工具（或您正在使用的任何浏览器的代码检查器）中关闭它们，并将position: absolute块下降到屏幕的实际底部。

请记住，<footer>的元素相对于最近的祖先位置，或者初始容器（如果没有）。它不一定将元素定位在视口的底部。

根据您计划使用JS滑块的方式，您可能需要使用高度和绝对定位值（position: absolute＆amp; top）来满足您的需求。

页脚不低于内容

2 个答案: