Question

我一直试图让我的页脚向右下方移动。目前，当我调整浏览器大小时，页面上唯一没有移动的东西，更不用说页面底部或右边。我是HTML新手，大多数都是将其作为数据科学项目的输出。这是我的代码：

＆＃13;

<!DOCTYPE html>
<html lang="en">
 


<style>
html {
    background: url("https://lh3.ggpht.com/TOsicwUVM6bKoB1_u_5noea0kkFAegkAdBFQcmTXhwKrN5485URcl0IWxgjldjd59A=h900") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
body { height: 100%;}
#nonFooter { position: relative; min-height: 100%;}
* html #nonFooter { height: 100%;}
#Footer { position: relative; margin-top: -7.5em; }

</style>

<body>
 
    <div class="page-wrap">
        <div class="header">
            <h3 style ="color:#FFFFFF" class="text-muted">Headerthing</h3>
        </div>
 
        <div>
            <h1 align="center" style ="color:#FFFFFF">Predict tool</h1>
            <p class="lead"></p>
        </div>
        <div style ="width: 300px; margin: 130px auto 0 auto; ">
        <div style ="color:#FFFFFF;">
           <form action="upload.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
            </form>

        <form action="/action_page.php">
  Instagram Handle:<br>
  <input type="text" name="handle"><br>
  <input type="submit" value="Submit">
</form>
        </div> 
        </div>


</div>
 
<footer class="site-footer">
    <p style="color:white">Founders: Charles Barkley, Hakeem the Dream and Shaqs fat ass </p>
</footer>


</body> 

</html>

＆＃13;

Answer 1

您的页脚已位于页面底部。通过向下移动它，我假设您指的是默认情况下自动分配给<p>标记的边距。您可以删除这些内容，并使用以下CSS获取绝对右下角显示的文字：

.site-footer p {
  margin: 0;
  position: absolute;
  bottom: 0;
  right: 0;
}

我创建了一个更新的小提琴，展示了这个here。

请注意，position: absolute与bottom: 0一起使用，如果您的页脚将停留在可见屏幕的右下角，则该元素将始终为即使您尚未滚动到其位置，也可以看到。

希望这有帮助！：）

我的HTML页脚不会向下移动

1 个答案: