放大100％視口時的內容中斷

我目前正在使用Bootstrap製作一個簡單的登錄頁面。我的Jumbotron設置爲100VH。放大100％視口時的內容中斷

當昨天測試時，我注意到當瀏覽器放大到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; }

我試了一下：

我試圖將'Box'的高度設置爲auto。沒有幫助。

我不認爲有很多人放大或縮小..但這是開發過程的一部分，我想知道如何解決一個錯誤..以及導致它的原因。

來源

2015-11-24 Mike

它必須是你的「vh」，這是打破它。你有使用它的原因嗎？ – durbnpoisn

說實話..我只是喜歡它的效果，它可以適應任何屏幕。我想這是我必須妥協的情況之一？ – Mike

「休息」是什麼意思？我沒有看到一個明顯的問題，除非你的意思是破解文本 – SmokeyPHP

嘗試改變.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; 
 
}

來源

2015-11-25 02:26:46

我給了這個嘗試..並似乎沒有解決問題。我明白這個答案。 – Mike

休息是什麼意思？它是超越頁腳的盒子嗎？或者框內的文本溢出而不是用框擴展？ –

是的，在這種情況下，盒子溢出它的父容器.. ** Jumbotron ** - 對不起，讓我更清楚@Tengku – Mike

我怎麼有點解決它：

我只是從

改變了超大屏幕的高度

'height：100vh'

到

'最小高度：100vh;'

它不會將box元素保留在div的中間位置，因爲它應該如此。但是，它確實解決了之前發生的簡單突破問題。

我會嘗試添加一些轉換：轉換屬性，看看我能否以這種方式正確居中。

來源

2015-11-25 18:39:25 Mike

放大100％視口時的內容中斷

回答

相關問題