[解決済み] CSSのpadding-bottomが効かないようです。

質問

固定フッターとページ下部の間にスペースを入れたいのですが、どうすればいいですか？そこで #main-content が、うまくいきません。何か見落とした問題があるのでしょうか？

CSS

#main-content {
    position: relative;
    width: 100%;
    padding-left:20px; 
    padding-right:20px;
    height: 300px; 

    box-sizing:border-box;
    padding-top: 50px; 
    padding-bottom: 200px;    
}

footer {
    background-color: #00496b;
    width: 100%;
    bottom: 0;
    position: fixed;
}

望ましい結果が得られる代わりに、メインコンテンツはフッターの後ろに消えてしまいます。私は #main-content をもう少し上に持っていく。問題を十分に説明できたでしょうか。

解決方法は？

このCSSコードでは

#main-content {
    position: relative;
    width: 100%;
    padding-left:20px; 
    padding-right:20px;
    height: 300px;
    box-sizing:border-box;
    padding-top: 50px; 
    padding-bottom: 200px;    
}

に固定高さを設定しました。 #メインコンテンツ そのため padding-bottom は有効ではありません。削除する height: 300px; プロパティに置き換えるか 300px で オート .

CSSのコードは次のようになります。

#main-content {
    position: relative;
    width: 100%;
    padding-left:20px; 
    padding-right:20px;
    height: auto;  //height is set to auto
    box-sizing:border-box;
    padding-top: 50px; 
    padding-bottom: 200px;    
}

さて、この padding-bottom プロパティが動作するはずです。これが役に立ったら教えてください :)