Question

我在另一个jsp中包含了一个jsp。页眉和页脚放在原始的jsp中（而不是包含的那个）。我想在页面底部修复我的页脚，并在溢出的情况下使内容可滚动，或者使页脚也与页面一起滚动。我已经尝试了所有＆＃34;修复页脚＆＃34;和＆＃34;滚动内容＆＃34;我可以在SO上找到解决方案。他们似乎都没有工作。这是我的代码：

<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;
}

Answer 1

请在您的CSS中尝试将页脚的位置固定在页面底部。

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

jsp：将页脚放在另一个jsp中包含的页面底部，并使内容可滚动

1 个答案: