jsp：別のjspに含まれているページの一番下にフッターを置き、内容をスクロール可能にします。

私は別のJSPにjspを含めました。ヘッダーとフッターは元のjspに含まれています（含まれているものではありません）。私は、ページの一番下にフッタを修正し、オーバーフローの場合にコンテンツをスクロール可能にするか、ページと共にフッタをスクロールさせたい。私はSO上で見つけることができるすべての "修正フッター"と "スクロールコンテンツ"ソリューションを試しました。彼らのどれも働いていないようです。は、ここに私のコードです：jsp：別のjspに含まれているページの一番下にフッターを置き、内容をスクロール可能にします。

<body class="landingPage"> 
<div class="header"> 
</div> 
<div class="mainClass"> 
    <div class= "banner"> 
     <p>Welcome </p> 
    </div> 
    <div align="center" class="Content"> 
     <%@ include file="jsp/page1.jsp" %> 

    </div> 
    </div> 
    <div id="footer">&copy; 
     <%=Calendar.getInstance().get(Calendar.YEAR) %> 
    All rights reserved. 
    </div> 
</body>

とCSS：

html, body { 
    height: 100%; 
    overflow: hidden; 
} 

body { 
    margin: 0; 
} 

.Content { 
    width: 100%; 
    display: inline-block; 
    overflow-y: auto; 
    height: 90%; 
} 

.mainClass { 
    margin: 10px 20px 0px 0px; 
    border-top: 10px; 
    border-left: 30px; 
    padding: 5px 0px 15px 15px; 
} 

.footer { 
    background-color: #edf2fc; 
    color: #0544aa; 
    position: static; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    padding: 1rem; 
    text-align: center; 
}

出典

2017-06-12 Abhineet Kumar

ページの下部にフッターの位置を固定するために、あなたのCSSでこれを試してみてください。

#footer { 
    background-color: #edf2fc; 
    color: #0544aa; 
    position: fixed; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    padding: 1rem; 
    text-align: center; 
}

出典

2017-06-12 07:52:16 satya

私の体の内容がオーバーフローし始めるとこれが壊れます。 –

1つのセミコロンがCSSから抜けてしまう前に、コードを編集してみましたか？ – satya

これはSOで見つけた最初の解決策の1つでした。はい、私は質問を投稿する前に既に試していました。 –

jsp：別のjspに含まれているページの一番下にフッターを置き、内容をスクロール可能にします。

答えて

関連する問題