我们的项目之一是创建这个具有主页、登录页面、管理页面的基本网站。
我已经制作了基本轮廓，我只是无法正确固定 div 的位置。所有页面都必须有页眉和页脚，并且应该与所有页面保持一致。
在我的管理页面上，我正确定位了标题。内容是 3x2 网格中的 6 张图片，我使用浮动 lefs 来排列它们。但我的页脚无法将自己定位在页面的最底部，即使它有bottom: 0px;我似乎无法让它工作。
我该如何解决？
附注。这是我第一次在这个网站上提问，我不知道如何显示我的代码，所以你们都可以看到我做了什么。
.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>[email protected]</email>
</p>
</div>
</div>从上面的评论...
我建议您仅在需要重叠事物时谨慎使用位置，并且仅在您希望文本“环绕”内容中的图像时才使用浮动。探索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);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句