Question

我目前正在使用Bootstrap创建一个简单的登录页面。我的Jumbotron设置为100VH。

昨天测试时，我注意到当浏览器放大到100％以上时，我的Jumbotron内容会中断。

此处发生的事情示例（放大）：https://jsfiddle.net/y8dnbz3t/

守则： CSS

*{margin: 0;}

.jumbotron {position: relative;
width: 100%;
height: 100vh;
background-color: lightblue;
text-align: center;}

/* Div that breaks */

.box {
    position: relative;
    display: block;
    height: 250px;
    width: 50%;
    background-color: black;
    color: white;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}

/* Content after 100VH */

.after {
    text-align: center;
    padding: 10px;
}

我尝试了什么：

我试图设置＆＃39; Box＆＃39;的高度。到汽车。没有帮助。

我预计很多人不会放大或缩小..但这是开发过程的一部分，也是我想知道如何修复的错误..以及导致它的原因。

Answer 1

尝试将.box类高度更改为50％

.box {
    position: relative;
    display: block;
    height: 50%;
    width: 50%;
    background-color: black;
    color: white;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}

Answer 2

我是如何解决的：

我只是从

改变了Jumbotron的高度

＆＃39;身高：100vh＆＃39;

到

＆＃39; min-height：100vh;＆＃39;

它不会将box元素保持在div的中间位置。但是，它确实解决了之前发生的简单问题。

我会尝试添加一些变换：翻译属性，看看我是否可以通过这种方式使其正确居中。

放大100％视口时内容中断

2 个答案: