为什么绝对定位不起作用？

-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代码也不同。有问题问题会问你答案。 –

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

为什么绝对定位不起作用？

回答

相关问题