我的页脚中有2行,第一行具有动态更新的列长。最下面的行是静态的,宽度较小的页脚行。

当第一行由于添加了更多项目或其他内容而更改高度时,两行之间会出现空白。

html - 不管第一行的大小如何,都将bootstrap行附加在其上方的行下方-LMLPHP

html - 不管第一行的大小如何,都将bootstrap行附加在其上方的行下方-LMLPHP

如您所见,添加项目时出现空白。

HTML:
    

<div class="row" id="footerColumns">
<?php
for ($i = 0; $i < $getColumns; $i++) {

    ?>
    <div class="col-md-<?php echo $columns; ?>">
        <h2><?php echo $headerColumn[$i]; ?></h2>
        <?php for ($y = 0; $y < 5; $y++) {
            ?><p>hi</p><?php
        } ?>
    </div>
    <?php
}
?>
</div>

<div class="row" id="bottomFooter">
    <div class="col-md-6">
        <p>hi</p>
    </div>

    <div class="col-md-6">
        <p>hi</p>
    </div>
</div>

</div>


CSS:

#footer-container
{
position: absolute;
bottom: 0;
width: 100%;
height: 200px;
background-color: #252629;
color: white;
}

#footerColumns
{
padding: 25px 50px 0 50px;
}

#bottomFooter
{
margin-top: 158px;
background-color: black;
color: white;
position: relative;
height: 50px;
bottom: 0;
}


我也将其设置为粘性页脚,因此我有如下CSS:

html
{
position: relative;
min-height: 100%;
max-width: 100%;
}

body
{
margin-bottom: 200px;
}

最佳答案

尝试这个

#bottomFooter
{
margin-top: auto;
background-color: black;
color: white;
position: relative;
height: 50px;
bottom: 0;
}


它将两行都拉近,也将消除空白。由于高边距值,所以出现空白。我已经使用自动使它保持简单。您也可以根据需要将其更改为较小的值(
10-05 21:06
查看更多