Question

我正在尝试将响应式表单放在div中，背景图像占据屏幕的整个宽度。在搜索了一段时间之后，似乎最好的选择是使图像的完整大小为背景图像div，以使用图像大小的填充底部。现在的问题是，当我在较小的屏幕上观看时，背景图像div很小，以适应表格的内容。我尝试使用最小宽度：100％，但这没有用。

HTML：

<div class="background-image-div">
    <div class="centerer-div">
        <form id="form">
           "some form stuff"
        </form>
    </div>
</div>

的CSS：

.background-image-div{
    background-image: url(background.png)
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: top;
    width: 100%;
    background-size: contain;
    position: relative;
    padding-bottom: 25%;
}
.centerer-div{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: auto;
    display: table;
    width: 100%;
}
#form{
    text-align: center;
}

Answer 1

也许是因为你没有关闭表格标签？

<div class="background-image-div">
    <div class="centerer-div">
        <form id="form">
           "some form stuff"
        </form>
    </div>
</div>

div高度与最小高度

1 个答案: