私は一番下に私のフッターを維持したい:絶対位置決めが機能しないのはなぜですか?
body, html{position:relative;}
footer{position:absolute;}
それでも、物事は奇妙です。 bottom: 0;
が実行されても、footer
は最下部に配置されません。誰も私がこれをデバッグするのを手助けすること JSBin hereおよびJSFiddle here。
私は一番下に私のフッターを維持したい:絶対位置決めが機能しないのはなぜですか?
body, html{position:relative;}
footer{position:absolute;}
それでも、物事は奇妙です。 bottom: 0;
が実行されても、footer
は最下部に配置されません。誰も私がこれをデバッグするのを手助けすること JSBin hereおよびJSFiddle here。
ホールページをカバーするには、ボディエレメントに高さまたは分の高さを設定する必要があります。次に、フッターが画面の一番下に移動します。外部リソースが消えるか、固定されたときに無駄になって理解されるように外部リソースに依存
html, body {
margin: 0;
padding: 0;
transition: all 1s;
font-family: "Trebuchet MS";
position:relative;
min-height:100vh;
}
footer{background-color:blue;width:100%;height:50px;position:absolute;bottom:0;}
<body>
<header id="header">
<ul id="logo">
<li><i></i></li>
</ul>
<nav>
<ul>
<li><a href="login.php">login</a></li><!--
--><li><a href="signup.php">signup</a></li>
</ul>
</nav>
</header>
<main id="main">
<div id="login-form">
<form method="POST" onsubmit="return ValidateEmail();">
<i id="login-image"></i>
<span id="username-container"><input type="text" name="email" required="required" class="text" placeholder="Username/Email" onkeyup="ValidateEmail()" /><br/><span id="idea"></span></span>
<span id="password-container"><input type="password" name="password" required="required" class="text" placeholder="Password" /><span id="toggle-password"></span></span><br/>
<input type="submit" name="submit" value="Login" /><a href="/">Signup now ?</a>
</form>
</div>
</main>
<footer>
<i>COPYRIGHT © 2017</i>
</footer>
<body>
あなたのコードが問題をどのように修正するかを説明するために、いくつかの解説を追加してください。 – Bobulous
Ok @Bobulous、私は説明を追加しました。 –
ありがとう@FarzinKanzi。私が使用したソリューションではありませんでしたが、非常に近いです。私はこれを答えとして受け入れます。 –
クラスに幅、高さ(および色!)を追加します。
footer {
background-color: black;
margin: 0!important;
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
color: white;
}
は私の問題を解決しません。https://s30.postimg.org/7h17ub8nl/Capture.png –
私たちはあなたの努力と理解なしに、あなたのコードに何が欠けているのかを伝えています。また、JSBinコードとJSFiddleコードも異なります。問題を尋ねられた質問を持っていると、問題の答えが得られます。 –
兄さんありがとう。あなたの努力を感謝します。 –
質問。 [MCVE]を作成し、**その質問自体**に入れてください。 – Quentin
質問内に関連情報を投稿するのに間違っていますか? – LGSon