使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在每個瀏覽器的頁面底部出現

回答

相關問題