使div在每个浏览器的页面底部出现

我有一个页面的顶部和底部已知内容的网页，以及未知的中间部分。中间部分可以短至100px或高于1000px。使div在每个浏览器的页面底部出现

制作中间部分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"> 
 
\t Fixed top box 
 
    </div> 
 
    <div class="main"> 
 
\t Box with unknown content 
 
    </div> 
 
    <div class="buttom"> 
 
\t Fixed buttom box 
 
    </div> 
 
</body> 
 
</html>

但由于某些原因，它不mozila浏览器。任何人都可以提出一些适用于每个浏览器

澄清：所有DIV应该是独立的，并在任何情况下一个DIV出现在顶部的另一个

来源

2016-08-17 levkaster

添加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"> 
 
\t Fixed top box 
 
    </div> 
 
    <div class="main"> 
 
\t Box with unknown content 
 
    </div> 
 
    <div class="buttom"> 
 
\t Fixed buttom box 
 
    </div> 
 
</body> 
 
</html>

来源

2016-08-17 12:39:59

工作！谢谢！ – levkaster

这会为你工作。使用position:fixed和bottom:0。在这种情况下，独立于页面中的任何其他元素，您的底部始终会从页面底部出现0px。

.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; 
 
}

<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>

如果你是不是在找固定的底部，你可以使用javascript实现相同。

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"); 
 
    } 
 
});

.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; 
 
}

<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>

来源

2016-08-17 12:38:36

这不起作用！如果中间部分的高度超过一个窗口高度，那么固定底部div将在中间部分 – levkaster

是不是你想要的。你在问题中提到了固定的底部。这种行为究竟应该是什么？ –

您可以通过绝对位置底部。

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

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

来源

2016-08-17 12:42:54

-1

希望它能帮助。

.top { 
 
    float: left; 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: #f00; 
 
} 
 
.main{} \t \t \t 
 
.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>

来源

2016-08-17 12:49:34

使div在每个浏览器的页面底部出现

回答

相关问题