我正试图为我正在处理的网站制作一个响应式页脚。 页脚需要始终位于页面的结尾/底部,即使页面内容只占页面的一半。
我已尝试使用此示例中的代码,但我无法使其工作。
页脚不能是粘性的,它必须在滚动到页面底部之后显示在页面的所有内容之后,或者如果没有内容则必须位于页面的底部。
我有一个页脚和一个标题组件,它们显示在我的应用程序组件中。
我在代码笔上找到的这个例子并不适合我,但这是我想要的确切行为。 - https://codepen.io/anon/pen/OxJooY
<div class="demo">
<h1>CSS “Always on the bottom” Footer</h1>
<p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>
<p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>
<p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>
<p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>
<p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>
<p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>
<p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>
<p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>
</div>
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
//我的应用程序组件的Css文件
body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.demo {
margin: 0 auto;
padding-top: 64px;
max-width: 640px;
width: 94%;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
答案 0 :(得分:5)
//将此添加到应用程序组件HTML文件和应用程序组件css文件
<div class="page-wrapper">
<div class="sticky-header">
<app-header></app-header> /* your header component */
</div>
<div class="content-wrapper">
<div class="content">
Your content goes here or another page's component.
</div>
<div class="footer">
<app-footer></app-footer> /* your footer component */
</div>
</div>
</div>
.page-wrapper {
height: 100vh;
width: 100vw;
overflow: hidden;
display: flex;
flex-direction: column;
}
.sticky-header {
flex-grow: 0;
min-height: 60px; /* whatever you want it to be */
}
.content-wrapper {
flex-grow: 1;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
}
.footer {
min-height: 60px; /* whatever you want it to be */
flex-grow: 0;
}