gpt4 book ai didi

php - 动态更改高度时,页脚不会停留在机器人上

转载 作者:行者123 更新时间:2023-11-28 03:22:31 25 4
gpt4 key购买 nike

我的页脚在每个页面上都工作正常,它总是在页面底部。但是,对于根据服务器上有多少图像动态将图像添加到页面的页面,如果图像太多,页脚会与图像重叠。

CSS 图像容器

.imgBot{
position: absolute;
height: auto;
width: 100%;
top: 500px;
display: flex;
flex-direction: row;
text-align: center;
flex-wrap: wrap;
left: 70px;
}

页面布局 head/body/footer

#container {
min-height:100%;
position:relative;
}
#header {
background:white;
padding:10px;
}
#body {
padding:10px;
padding-bottom:40px; /* Height of the footer */
}
#footer {
position: absolute;
bottom:0;
left: 0;
right: 0;
height:40px; /* Height of the footer */
background:#EBEBEB;
border-radius: 5px;
}

HTML

<body>
<div id="container">
(pointless code here)
<div class='imgBot'>
<?php echo $imgBox;?>
</div>
<?php include "../footer.php"?>
</div>

PHP

while ($row = $sqlQuery->fetch_array()) {
$childID = $row['ID'];
$childName = $pID . "_" . $childID . ".jpg";
$imgBox .= "<img src='../ProductImages/ChildImages/$childName'
width='200px' height='200px'>";
}

最佳答案

我不知道为什么你的 css 中有这么多属性,也不知道你真正的最终文件是如何产生的。不管怎样,您需要的基本版本可以通过这种方式完成:

风格:

<style>
#container {
position:relative;
float:left;
}
#header {
background:white;
padding:10px;
}
#body {
padding:10px;
padding-bottom:40px; /* Height of the footer */
}
#footer {
position: relative;
float:left;
height:40px;
width:100%;
margin-top:10px;
background:#EBEBEB;
border-radius: 5px;
}
.imgBot{
position: relative;
float:left;
height: auto;
width: 100%;
}
</style>

HTML:

<body>
<div id="container">
<div class='imgBot'>

</div>
</div>
<div id="footer">
footer
</div>

PHP(作为示例,更改行数以查看它是否适合):

<?php 
$row=0;
while ($row <20) {
$imgBox= "<img src='../ProductImages/ChildImages/'
width='200px' height='200px'>";
echo $imgBox;
$row++;
}
?>

关于php - 动态更改高度时,页脚不会停留在机器人上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45142806/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com