Question

我正在构建一个在Chrome和Safari中运行良好的网站，但在Firefox中遇到了困难。此问题中适用的HTML很简单，只有三个div在另一个div内。目标是让一个div位于父div的顶部，一个位于底部，另一个位于剩余空间：

                <div class="outer">
                    <div class="top">                            
                        <p>some junk here</p>
                    </div>

                    <div class="middle">
                        <img src="<?php echo(htmlspecialchars($image_url)); ?>"/>
                    </div>

                    <div class="bottom">
                        <p>more junk</p>
                    </div>
                </div>

现在，css如下：

.outer {
    position: relative;
    display: inline-block;
    text-align: center;
    width: 600px;
    height: 600px;
}

.middle {
    background-size: 100%;
    top: 62px;
    bottom: 62px;
    right: 0;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
}

.middle img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 95%;
    max-height: 95%;
}

.top, .bottom {
    width: 100%; /* THIS IS WHAT IS NOT WORKING */
    height: 60px;
    margin: 0;
    padding: 0;
    display: table;
    position: absolute;
}

.top {
    top: 0;
}

.bottom {
    bottom: 0;
}

问题是顶部和底部div未扩展到100％。为了适应他们的内容，占用的空间很小。我尝试在div上设置最大宽度，尝试更改显示类型，但没有任何效果。踢球者，一旦我调整窗口的大小，即使是最小的量，顶部和底部div的射击也会达到100％。奇怪。我对此感到茫然，所以非常感谢任何帮助。感谢。

Answer 1

.outer此方案的DIV不能为display: inline-block。 inline-block表示适应子宽度。您需要指定精确的width维度，或使用block显示属性。

.outer {
    position: relative;
    display: block; /* use BLOCK here instead of inline-block; */
    text-align: center;
}

Answer 2

顶部和底部div s＆＃39;宽度不正常是因为它们被设置为显示类型的表。只删除该行修复了问题。

.top, .bottom {
    width: 100%;
    height: 60px;
    margin: 0;
    padding: 0;
    /* REMOVE: display: table; */
    position: absolute;
}

Firefox - 宽度：100％无法按预期工作

2 个答案: