私はすべてを試しましたが、フッタはページの一番下にありません。 私はposition: fixed;を試しましたが、いつも同じ位置にスクロールしています。 CSS次フッターを下に置く方法
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
}
.footer, .push {
height: 142px;
background: black;
}
使用：ここ
.footer {
position:fixed;
left:0px;
bottom:0px;
height:142px;
width:100%;
background:black;
}
は、テスト・フィドルです：https://jsfiddle.net/85nyb2mv/
position: fixedを使用する場合は、要素が常に画面の同じ位置になります。フッターがラッパー要素の一番下にくるようにする場合は、position: relativeを.wrapperに、position: absoluteを.footerに設定して、フッターをラッパーの下に置きます。次に例を示します。
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
background-color: gray;
position: relative;
}
.footer, .push {
height: 142px;
width: 100%;
background: black;
position: absolute;
bottom: 0;
left: 0;
}<div class="wrapper">
<div class="footer"></footer>
</div>使用このCSSスタイル：
.wrapper {
height: calc(100% - 142px);
margin: 0 auto;
}
.footer {
height: 142px;
background: black;
position: absolute;
bottom: 0;
right: 0;
left: 0;
z-index: 1;
}
CASE 1
body "heightが100vh
body{
margin: 0;
padding: 0;
min-height: 100vh;
height: 2000px;
position: relative;
background: pink;
}
header{
width: 100vw;
height: 100px;
background: gold;
}
footer{
position: absolute;
bottom: 0px;
left: 0px;
width: 100vw;
height: 100px;
background:darkgray;
}<body>
<header>
</header>
<footer>
</footer>
</body>CASE 2
body 'heightがより小さい100vh
body{
margin: 0;
padding: 0;
min-height: 100vh;
height: 200px;
position: relative;
background: pink;
}
header{
width: 100vw;
height: 100px;
background: gold;
}
footer{
position: absolute;
bottom: 0px;
left: 0px;
width: 100vw;
height: 100px;
background:darkgray;
}<body>
<header>
</header>
<footer>
</footer>
</body>**html**
<body>
<header>
</header>
<section>
</section>
<footer>
</footer>
</body>
**CSS**
<style type="text/css">
footer {
position:fixed;
left:0px;
bottom:0px;
width:100%;
background:black;
color:#fff;
z-index:99;
}
</style>
問題が<div class="fade">たので、私はそれを除去し、---->ヘッダとフッタ
間この.footer { 位置試みる
<div class="page-content">を追加した：固定します。 左：0ピクセル。 bottom：0px; 身長：30px; 幅：100％; 背景：黒; } – Rakibページの下部にあるはずのフッターやフッターについて話していますか？ –
ページの下部にあります。私は位置を試みた：固定; bottom：0; – Zerry