Question

我有一个页面顶部和底部已知内容的网页，以及未知的中间部分。中间部分可以短至100px或高于1000px的高度。

制作中间部分min-height: 100%; 不是一个选项。

我找到了一个很好的答案：

        html{
            height:100%;
            width:100%;
        }
        body{
            min-height:100%;
            display:table;
        }
        .top{
            display:block;
        }
        .main{
            display:block;
        }
        .buttom{
            display:table-footer-group;
        }

<html>
 <body>
  <div class="top">
	Fixed top box
  </div>
  <div class="main">
	Box with unknown content
  </div>
  <div class="buttom">
	Fixed buttom box
  </div>
 </body>
</html>

但由于某种原因，它在mozila浏览器中不起作用。任何人都可以建议在每个浏览器中都有效的东西吗？

澄清：所有div应该是分开的，在任何情况下都不应该将一个div显示在另一个div上

Answer 1

这对你有用。使用position:fixed和bottom:0。在这种情况下，独立于页面中的任何其他元素，您的底部将始终显示在页面底部0px。

＆＃13;

.top {
  position: fixed;
  width: 100vw;
  height: 50px;
  top: 0;
  background: red
}
.main {
  /* style for main */
}
.bottom {
  height: 100px;
  width: 100vw;
  background: #444;
  position: fixed;
  bottom: 0;
  color: white;
}

＆＃13;

<html>

<body>
  <div class="top">
    Fixed top box
  </div>
  <div class="main">
    Box with unknown content
  </div>
  <div class="bottom">
    Fixed buttom box
  </div>
</body>

</html>

＆＃13;

如果您没有寻找固定的底部，您可以使用javascript实现相同的目标。

＆＃13;

jQuery(document).ready(function() {
  var windowHeight = $(window).height();
  var mainHeight = $(".main").height();
  var topHeight = $(".top").height();
  var bottomHeight = $(".bottom").height();
  if ((windowHeight - (topHeight + bottomHeight)) > mainHeight) {
    $(".bottom").css("position", "fixed");
  } else {
    $(".bottom").css("position", "initial");
  }
});

＆＃13;

.top {
  position: fixed;
  width: 100vw;
  height: 50px;
  top: 0;
  background: red
}
.main {
  height: 10px;
}
.bottom {
  height: 100px;
  width: 100vw;
  background: #444;
  bottom: 0;
  color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="top">
    Fixed top box
  </div>
  <div class="main">
    Box with unknown content
  </div>
  <div class="bottom">
    Fixed buttom box
  </div>
</body>

＆＃13;

Answer 2

添加height:100%;会增加mozilla的高度。

        html{
            height:100%;
            width:100%;
        }
        body{
            min-height:100%;
            display:table;
              height:100%;
        }
        .top{
            display:block;
        }
        .main{
            display:block;
        }
        .buttom{
            display:table-footer-group;
              height: 20px;
        }

<html>
 <body>
  <div class="top">
	Fixed top box
  </div>
  <div class="main">
	Box with unknown content
  </div>
  <div class="buttom">
	Fixed buttom box
  </div>
 </body>
</html>

Answer 3

您可以按绝对位置定位到底部。

＆＃13;

        html{
            height:100%;
            width:100%;
        }
        body{
            min-height:100vh;
            display:table;
        }
        .top{
            display:block;
        }
        .main{
            display:block;
        }
        .buttom{
            display:block;
            position:absolute;
            bottom:0;
        }

＆＃13;

<html>
 <body>
  <div class="top">
	Fixed top box
  </div>
  <div class="main">
	Box with unknown content
  </div>
  <div class="buttom">
	Fixed buttom box
  </div>
 </body>
</html>

＆＃13;

Answer 4

希望它有所帮助。

.top { 
    float: left;
    width: 100%;
    height: 50px;
    background-color: #f00;
}
.main{}			
.buttom { 
    position: fixed;
    width: 100%;
    height: 50px;
    bottom: 0;
    background-color: #00f;
}

<div class="top">
    Fixed top box
</div>
<div class="main">
    Box with unknown content
</div>
<div class="buttom">
    Fixed buttom box
</div>

在每个浏览器中使div显示在页面底部

4 个答案: