Question

我已将div设置为78vh。 78/13 = 6对于每个按钮，我的尺寸为6vh，因此所有13个按钮都应该在78vh范围内。在Firefox中，一切看起来都不错，但是在Google Chrome中，最后一个按钮就超越了。有谁知道为什么？请注意我不是HTML开发人员，所以一个简单的解释对我来说意义重大。

<body>
    <div style="height:85vh;overflow:auto;background-color:green;margin-top:10vh;">
        <div style="height:78vh;margin:2vh;background-color:white;">
            <div class="visible-sm-block visible-md-block visible-lg-block" style="background-color:yellow;height:78vh;margin-right:66%;">
                    <button style="height:6vh; width:12vh"> 0 </button>
                    <br><button style="height:6vh; width:12vh"> 0 </button>  
                    <br><button style="height:6vh; width:12vh"> 0 </button>
                    <br><button style="height:6vh; width:12vh"> 0 </button>
                    <br><button style="height:6vh; width:12vh"> 0 </button>
                    <br><button style="height:6vh; width:12vh"> 0 </button>
                    <br><button style="height:6vh; width:12vh"> 0 </button>
                    <br><button style="height:6vh; width:12vh"> 0 </button>
                    <br><button style="height:6vh; width:12vh"> 0 </button>
                    <br><button style="height:6vh; width:12vh"> 0 </button>
                    <br><button style="height:6vh; width:12vh"> 0 </button>
                    <br><button style="height:6vh; width:12vh"> 0 </button>
                    <br><button style="height:6vh; width:12vh"> 0 </button>
            </div>
        </div>
    </div>
    <script src="static/js/jquery.min.js"></script>
    <script src="static/bootstrap/js/bootstrap.min.js"></script>
</body>

Answer 1

删除centerY代码并添加'display：block;'按钮的样式。

Answer 2

这是按钮之间的<br />标签。看来，至少在Chrome中，随着窗口高度的变化，<br />标记会逐步改变高度。这使得按钮的组合高度看起来太少或太多。

解决此问题的一种方法是删除<br />代码并将按钮的CSS显示属性设置为block。

这个小提琴显示了两种方法之间的区别：https://jsfiddle.net/0f5y1vj8/。 <br />标签的方法位于右侧。尝试更改结果窗格的高度，您将看到按钮之间的间距如何变化。

为什么我的按钮会溢出Chrome中的容器？

2 个答案: