min-height：HTMLの `div`の100％がフッタをぼやけます

ページの高さにかかわらず、フッタを下にしておきたいと思います。私はバックグラウンドのためにlinear gradientを追加するまでこれを行うことができました。 linear gradient background colorでページ全体を埋めるためにhtml divにmin-height:100%;を追加する必要がありました。しかし、今では私のフッタにはその下に空白があり、完全に下にはありません。min-height：HTMLの `div`の100％がフッタをぼやけます

私の高さは、フッタは右働く一番下までスクロールするのに十分な長さであるページ..
高さは、ナビゲーションバーをスクロールせずにページ全体でのページはその下のスペースを持っているようです。フッタの前にどんなdivが来ても、それは下に張っているように見えます。

html { 
 
    min-height: 100%; 
 
} 
 

 
body { 
 
    background: linear-gradient(45deg, rgb(51, 173, 255), rgb(128, 255, 212))no-repeat; 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 

 
#wrap { 
 
    min-height: 100%; 
 
} 
 

 
#main { 
 
    overflow: auto; 
 
    padding-bottom: 200px; 
 
} 
 

 

 
/* must be same height as the footer */ 
 

 
#footer { 
 
    position: relative; 
 
    margin-top: -200px; 
 
    /* negative value of footer height */ 
 
    height: 200px; 
 
    background-color: #484848; 
 
    opacity: 0.8; 
 
    width: 100%; 
 
    color: #fff; 
 
    clear: both; 
 
}

application.html.erb

<html> 
 

 
<body style="min-width:1100px;"> 
 

 

 

 
    <div id="header" style="min-width:1120px;"> 
 

 
    <% if content_for?(:navbar) %> 
 
     <%= yield(:navbar) %> 
 
     <% else %> 
 
      <%= render 'shared/navbar' %> 
 
      <% end %> 
 

 
    </div> 
 

 

 
    <div id="wrap"> 
 
    <div id="main"> 
 

 
     <%= render 'shared/message' %> 
 

 
     <%= yield %> 
 

 
    </div> 
 

 
    </div> 
 

 
    <div id="footer" style="min-width:1120px;"> 
 
    <%= render 'shared/footer' %> 
 

 
    </div> 
 

 
</body> 
 

 
</html>

出典

2017-04-19 Michael Lombardo

あなたのコードをフォーマットするために学びます。それはトラブルシューティング/メンテナンスを簡単にします。 –

あなたのコードの例はどこかにありますか？コンパイルされたコードをどこかに投稿して、それが動作しているのを見ることができますか？ –

あなたはflexboxesを利用するために、あなたのCSSを変更することがありますか？この記事に受け入れ答えはflexboxesを使用してスティッキーフッターの良い例があります。 css calc and min-height can not team up properly

出典

2017-04-19 02:06:33 Rando

はい私はこのようにしましたが、それでも同じ問題があるようです。 'body-div'の上の' html div'の 'min-height：100％;'を 'height ：100％; 'うまく動作します –

htmlからmin-heightを削除し、代わりに背景画像をhtmlに追加できますか？背景：直線勾配（45度、rgb（51,173,255）、rgb（128,255,212））no-repeat ;; -webkit-background-size：cover; -moz-background-size：cover; -o-background-size：cover; background-size：cover; – Rando

私がそうすると背景が白くなる –

私はautoに設定さ分の高さを持っているラッパー#mainを追加する必要がありました。 html divmin-height:100%;をheight:100%;に変更しました。

html{ 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
body { 
 
    
 
    background: linear-gradient(45deg, rgb(51, 173, 255), rgb(128, 255, 212))no-repeat; 
 
    margin: 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 100%; 
 
    height: 100%; 
 

 
} 
 

 
footer{ 
 
flex-shrink: 0; 
 
height: 200px; 
 
    background-color: #484848; 
 
    opacity: 0.8; 
 
    width:100%; 
 
    color:#fff; 
 
} 
 

 
#main { 
 
    background: linear-gradient(45deg, rgb(51, 173, 255), rgb(128, 255, 212))no-repeat; 
 
    min-height: auto; 
 
    flex-grow: 1; 
 
    flex-shrink: 0; 
 
    }

application.html.erb

<body style="min-width:1100px;"> 
 

 
    <div id="header" style="min-width:1120px;"> 
 

 
    <% if content_for?(:navbar) %> 
 
     <%= yield(:navbar) %> 
 
     <% else %> 
 
      <%= render 'shared/navbar' %> 
 
      <% end %> 
 

 
    </div> 
 

 

 
    <div id="main"> 
 

 

 
    <%= render 'shared/message' %> 
 

 
     <%= yield %> 
 

 

 
    </div> 
 

 

 
    <footer style="min-width:1120px;"> 
 
    <%= render 'shared/footer' %> 
 

 
    </footer> 
 

 
</body>

出典

2017-04-19 03:58:53

min-height：HTMLの `div`の100％がフッタをぼやけます

答えて

関連する問題