すべてのブラウザでページの下部に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>

をしかし、いくつかの理由では、モジラのブラウザでは動作しません。誰もがあらゆるブラウザで動作する何かを提案できますか？すべてが別のことになってDIV と、いかなる場合にも1がトップ。これはあなたのために働くだろう別の

出典

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

Worked！ありがとう！ – levkaster

に表示されるDIV必要があります。

を明確にします。 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を表示させます。

答えて

関連する問題