所以我试图将页脚设置为固定在底部(确实如此),但它与我的一些内容重叠,并且在页面打开时也会立即看到。我希望它位于页面底部并且只有在滚动时才能看到
CSS
content {
background-color: #ddd;
padding: 10px;
width: 99%;
font-family: 'Gill Sans';
overflow: hidden;
}
.contentTop {
color: var(--third-color);
font-size: 1.4em;
font-family: 'Courier New', Courier, monospace;
}
.contentBottom {
color: var(--third-color);
font-size: 1em;
font-family: 'Courier New', Courier, monospace;
}
.flex-container {
display: flex;
flex-direction: row;
}
.flex-left {
width: 55%;
height: 100vh;
margin: 5px;
margin-left: 30px;
padding: 5px;
border: 2px solid var(--primary-color);
}
.flex-right {
width: 30%;
margin: 5px;
padding: 5px;
border: 2px solid var(--primary-color);
margin-top: 180px;
margin-left: 100px;
}
.footer {
position: fixed;
margin-top: 100%;
left: 0;
bottom: 0;
text-align: center;
background-color: var(--secondary-color);
color: var(--third-color);
padding: 10px;
width: 100%;
font-family: 'Courier New', Courier, monospace;
display: flex;
height: 100px;
}
.col-1 {
font-size: 0.8em;
margin-top: -10px;
margin-left: 30px;
}
.col-2 {
font-size: 0.8em;
flex-grow: 1;
margin-top: -10px;
margin-right: 50px;
}
.col-3 {
font-size: 0.8em;
margin-top: -10px;
margin-right: 30px;
我尝试更改页脚的 position: 属性,但没有成功。试图将 padding-bottom 设置为内容但保持不变。
HTML
<div class="flex-container">
<div class="flex-left">
<span class="contentTop"><h2>aaaaaaaa</h2><span><br>
<span class="contentBottom"><p>aaaaaaaaaa <br>
aaaaaaaaaaa
</span>
</div>
<div class="flex-right">
<div class="contentImg">
<h2><img src="progwebpic.webp" alt="propic1"></h2>
</div>
</div>
好吧,然后只需从页脚中删除
position: fixed;
并为您的内容定义min-height: calc(100vh - 100px)
(即全窗口高度减去页脚高度)。