2016-10-06 7 views
0

私はhtmlページを開いて、データベースのデータとページの下部にフッターを含むテーブルを表示します。フッタが小さい画面で表示される

問題は、小さな画面を有する代わりに、底部であることの、フッタ(以下760pxの周囲)は、が上方したがって重複を進み、表示データの部分を隠蔽することです。

画面のサイズに関係なく、フッターは常にページの下部に配置する必要があります。

私のコードスニペットは以下のとおりです。あなたに解決策を提供してください。

編集1:(静的)シナリオは(小さい画面サイズのためにチェックアウトしてください)codepenのURLで入手できます。http://codepen.io/abbor123/pen/YGwVXg

フッター要素

<div class="footer"> 
    <div class="container"> 
     <p>Designed & Created by AB </p> 
     <p><i class="fa fa-lg fa-creative-commons" aria-hidden="true"></i> Some Rights Reserved </p> 
    </div> 
</div> 

CSS

.footer 
{ 
    clear: both; 
    position: relative; 
    z-index: 10; 
    height: 8em; 
    margin-top: -5em; 
    padding-top: 2.5em; 
    background: #009933; 
    text-align: center; 
} 

body 
{ 
    background:url(image.png) no-repeat center center fixed; 
    background-size: cover; 
    font-family: 'Exo 2', sans-serif; 
    color: black; 
} 

@media (max-width: 770px) 
{ 
    #table-display 
    { 
     font-family: 'Exo 2', serif; 
     text-shadow: 4px 4px 4px #aaa; 
     text-align: left; 
     color: black; 
     margin-top: 60px; 
     border-collapse: collapse; 
     width: 100%; 
    } 
} 
+0

あなたはjsfiddleを提供することができます...だから私たちは何が起こっているのを見ることができますか? - 大雑把な推測では、あなたのCSSと何か関係があるはずです。あなたのマージントップを見てください –

+0

マージントップのために負の価値を持っている可能性が最も高いでしょう。 – MikeeeGeee

+0

margin-topは上記のシナリオに影響しません。私は問題のページが現在データベースのデータを使って作成されているので、しばらく時間がかかるjsfiddleを作成しようとします。 – ABor

答えて

1

フッターの問題を解決するには、.rowクラスからheight: 60em;を削除してください。 CodePen用のCSSの68行目です。 http://codepen.io/FluidOfInsanity/pen/gwvZLN?editors=1100 また、td:beforeからtop: 6px;を削除しますか?たぶん、あなたの例はちょっとしたモックアップですが、それは私の例を捨ててしまいます。

関連する問題