絶対位置決めが機能しないのはなぜですか？

-2

body, html{position:relative;} 
footer{position:absolute;}

それでも、物事は奇妙です。 bottom: 0;が実行されても、footerは最下部に配置されません。誰も私がこれをデバッグするのを手助けすること JSBin hereおよびJSFiddle here。

出典

2017-02-11 Naveen Niraula

質問。 [MCVE]を作成し、**その質問自体**に入れてください。 – Quentin

質問内に関連情報を投稿するのに間違っていますか？ – LGSon

ホールページをカバーするには、ボディエレメントに高さまたは分の高さを設定する必要があります。次に、フッターが画面の一番下に移動します。外部リソースが消えるか、固定されたときに無駄になって理解されるように外部リソースに依存

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 &copy; 2017</i> 
 
    </footer> 
 
    <body>

出典

2017-02-11 13:41:27

あなたのコードが問題をどのように修正するかを説明するために、いくつかの解説を追加してください。 – Bobulous

Ok @Bobulous、私は説明を追加しました。 –

ありがとう@FarzinKanzi。私が使用したソリューションではありませんでしたが、非常に近いです。私はこれを答えとして受け入れます。 –

クラスに幅、高さ（および色！）を追加します。

footer { 
    background-color: black; 
    margin: 0!important; 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 100px; 
    color: white; 
}

出典

2017-02-11 13:18:18

は私の問題を解決しません。https://s30.postimg.org/7h17ub8nl/Capture.png –

私たちはあなたの努力と理解なしに、あなたのコードに何が欠けているのかを伝えています。また、JSBinコードとJSFiddleコードも異なります。問題を尋ねられた質問を持っていると、問題の答えが得られます。 –

兄さんありがとう。あなたの努力を感謝します。 –

絶対位置決めが機能しないのはなぜですか？

答えて

関連する問題