Question

我目前正在使用Bootstrap来设计网站。我的页面包含div标签中的内容，横跨页面的整个宽度（宽度：100％），但是我必须使用数字px值设置我的高度（即＆＃34; 250px＆＃34;）否则div从顶部到底部跨越整个页面，如果我取出宽度并指定最小宽度，也会发生这种情况。无论如何我可以设置一个最小宽度，然后在需要时扩展div。这是我的相关CSS代码：

.cd {
    width: 100%;
    height: 250px;
    background: rgba(0,0,0,1);

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
    padding: 30px;
    padding-left: 25%;
    padding-right: 25%;
}

感谢您的帮助。

编辑：JSFiddle link

Answer 1

由于position: absolute与top: 0和bottom: 0，您的div占据了网页的全部高度。该组合将拉伸div以填充其容器的整个高度。你最好的办法是完全摆脱绝对定位。

编辑：看到JSFiddle，将我的评论从顶层转到这里：

如果您的浏览器支持策略允许，我建议使用flexbox作为垂直居中元素。否则你可能需要求助于使用display：table;在父和显示上：table-cell; vertical-align：孩子的中间位置。

Answer 2

尝试替换

<div class='row'>
<?php $i=1; for ($x=0;$x<count($row_products);$x++) { ?>  
    <div class="col-md-3">
        <img src="<?php echo $row_products['productURL']; ?>" width="200"><br>
        <span class="dM"><?php echo $row_products['productName']; ?></span> <br>
        <span class="dN"><?php echo $row_products['price']; ?></span><br>
            <p><a class="btn btn-default" href="#" role="button">add to cart &raquo;</a></p>
    </div>
<?php if ($i == 4) {
        echo "</div><div class='row'>";
        $i = 1;
    } else {
        $i++;
    }
}
?>
</div>

与

height: 250px;

重新调整高度以匹配内容的DIV

2 个答案: