爲什麼絕對定位不起作用？

-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

好的@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代碼也不同。有問題問題會問你答案。 –

謝謝兄弟。感謝你的努力。 –

爲什麼絕對定位不起作用？

回答

相關問題