如何使用具有浮动属性的内容定位页脚

Question

我们的一个项目是创建这个具有主页、登录页面、管理页面的基本网站。

基本的大纲已经做好了，只是div的位置没法正确定位。所有页面都必须有页眉和页脚，并且应与所有页面保持一致。

在我的管理页面上，我的页眉位置正确。内容是 3x2 网格中的 6 张图片，我使用浮动 lefs 来排列它们。但是我的页脚无法将自己定位在页面的底部，即使它有 bottom: 0px; 我似乎无法让它工作。

我该如何解决这个问题？

PS。这是我第一次在这个网站上提问，我不知道如何显示我的代码让大家看看我做了什么。

.foot {
  width: 100%;
  height: 150px;
  background-image: url(images/maoheader.jpg);
  background-size: contain;
  position: absolute;
  bottom: 0;
}

.sepfoot {
  width: 100%;
  height: 150px;
  background-image: url(images/divider.png);
  background-size: contain;
  position: relative;
  bottom: 74px;
  z-index: 1;
}

.foot1 {
  padding: 15px;
}

.stud {
  width: 550px;
  height: 350px;
  border: rgb(70, 24, 49) solid 3px;
}

.sFrame {
  width: 550px;
  height: 350px;
  margin: 40px;
  position: relative;
  float: left;
}

<!-- this is div dor header-->
<div>
  <div class="header">
    <!-- <button type"button" style="position:absolute; right:20px; 
    top:10px;" class="but"><a href="Index.html">Home Page</a></button> -->
    <h1 class="stroke">KIA ORA AOTEAROA</h1>
    <p class="phead">LIBRARY NAME</p>
  </div>
</div>

<div class="sep"></div>

<!-- this is div for page content -->
<div class="test">

  <div class="nav">A-Z</div>
  <div class="nav">FICTION</div>
  <div class="nav">NON-FICTION</div>
  <div class="nav">AUTHOR</div>

  <div>
    <div class="sFrame"><img src="images/s1.jpg" class="stud"></div>
    <div class="sFrame"><img src="images/s2.jpg" class="stud"></div>
    <div class="sFrame"><img src="images/s3.jpg" class="stud"></div>
    <div class="sFrame"><img src="images/s4.jpg" class="stud"></div>
    <div class="sFrame"><img src="images/s5.jpg" class="stud"></div>
    <div class="sFrame"><img src="images/s6.jpg" class="stud"></div>
  </div>

  <!-- this is footer -->
  <div class="foot">
    <div class="sepfoot"></div>
    <p class="foot1">Created by: Pete Castolome<br> s00019257
      <br> +64 021 23456789<br>
      <email>petecastolome@yahoo.com</email>
    </p>
  </div>
  
</div>

Answer 1

.foot{
width: 100%;
height: 150px;   
background-image: url(images/maoheader.jpg);
background-size: contain;
display:flex;
bottom: 0;
}

.sepfoot{
height: 150px;
background-image: url(images/divider.png);
background-size: contain;
position: relative;
/*bottom: 74px;*/
z-index: 1;
}

.foot1{
padding: 15px;
}
.stud{
width: 550px;
height: 350px;
border: rgb(70, 24, 49) solid 3px;

}

.sFrame{
width: 550px;
height: 350px;
margin: 40px;
position: relative;
float: left;
}

#exampleimg { width:150px;
              height:150px;
              background:black;}

<html>
<head>
    <title>Admin Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body class="container">
<!-- this is div dor header-->
<div>   
<div class="header">
    
   <!-- <button type"button" style="position:absolute; right:20px; 
top:10px;" class="but"><a href="Index.html">Home Page</a></button> -->
        <h1 class="stroke">KIA ORA AOTEAROA</h1>
        <p class="phead">LIBRARY NAME</p>  
</div>

</div>
   <div class="sep"></div>

<!-- this is div for page content -->
<div class="test">

        <div class="nav">A-Z</div>
        <div class="nav">FICTION</div>
        <div class="nav">NON-FICTION</div>
        <div class="nav">AUTHOR</div>

    <div>
     <div class="sFrame"><img src="images/s1.jpg" class="stud"></div>
     <div class="sFrame"><img src="images/s2.jpg" class="stud"></div>
     <div class="sFrame"><img src="images/s3.jpg" class="stud"></div>
     <div class="sFrame"><img src="images/s4.jpg" class="stud"></div>
     <div class="sFrame"><img src="images/s5.jpg" class="stud"></div>
     <div class="sFrame"><img src="images/s6.jpg" class="stud"></div>

    </div>

<!-- this is footer -->

    <div class="foot">
        <div class="sepfoot"> 
             <div id="exampleimg"></div>
        </div>
      <p class="foot1">Created by: Pete Castolome<br>
              s00019257<br>
              +64 021 23456789<br>
              <email>petecastolome@yahoo.com</email></p>
        </div>

</div>
</body>
</html>

我添加 display:flex 并删除 .foot 中的 position:absolute 这是你想要的吗？？

--

你的意思是这样？

Answer 2

从上面的评论...

我建议您谨慎使用位置，仅在需要重叠内容时才使用，并且仅在您希望文本“环绕”内容中的图像时才使用浮动。探索 display: flex; 像列一样的布局。

示例：

删除所有 positioning，暂时坚持源代码顺序。随着页面内容变长，页脚将出现在内容的底部。

对于页面内容：

HTML

<div class="flex-parent">
     <div class="flex-child sFrame"><img src="images/s1.jpg" class="stud"></div>
     <div class="flex-child sFrame"><img src="images/s2.jpg" class="stud"></div>
     <div class="flex-child sFrame"><img src="images/s3.jpg" class="stud"></div>
     <div class="flex-child sFrame"><img src="images/s4.jpg" class="stud"></div>
     <div class="flex-child sFrame"><img src="images/s5.jpg" class="stud"></div>
     <div class="flex-child sFrame"><img src="images/s6.jpg" class="stud"></div>
</div>

CSS

.flex-parent {
    diplay: flex;
    flex-wrap: wrap;
}

.flex-child {
    width: calc(100% / 3);
}

Answer 3

只需从任何容器中取出页脚 DIV 即可。另请注意，如果您的页面内容的高度不足以填充 window 显示高度，则页脚可能会出现在底线上方。 “最小高度：100%；”到 BODY 标签将修复它。

如何使用具有浮动属性的内容定位页脚

how to position footer with contents that has float properties

html

css

footer

positioning