我的布局在不同的設備上看起來不錯，但是對于平板電腦，我遇到了問題。出現水平滾動。我正在使用 flexbox，所有地方的寬度都是 100%。在小型設備上，它只是應該創建行。
問題截圖： 
謝謝！
#wrapper {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
#flexrow {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
flex: 1 1 auto;
}
#navigation {
width: 20%;
}
#content {
width: 60%;
text-align: justify;
}
#rellinks {
width: 20%;
}
footer {
}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
html, body {
width: 100%;
height: 100%;
}
#wrapper {
width: 100%;
}
#flexrow {
flex-direction: column;
width: 100%;
}
#navigation, #rellinks {
width: 100%;
}
#content {
width: 100%;
flex: 1 1 auto;
}
}
uj5u.com熱心網友回復：
我已經復制了它，在我的情況下body，窄螢屏有一個margin來自用戶代理。
這解決了這個問題：
html, body {
width: 100%;
height: 100%;
margin: 0;
}
第二種選擇：
html {
width: 100%;
height: 100%;
}
uj5u.com熱心網友回復：
看起來您需要設定box-sizing: border-box;為#wrapper 或#flexrow。
這是 Mozilla 的解釋（https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing）：
默認情況下，在 CSS 框模型中，您分配給元素的寬度和高度僅應用于元素的內容框。如果元素有任何邊框或內邊距，則將其添加到寬度和高度以達到在螢屏上呈現的框的大小。這意味著當您設定寬度和高度時，您必須調整您提供的值以允許可能添加的任何邊框或填充。例如，如果您有四個寬度為 25%; 的框，如果其中任何一個框具有左或右內邊距或左或右邊框，則默認情況下，它們將不會在父容器的約束內放置在一行上。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/403313.html
標籤：
上一篇：旋轉按鈕并使邊緣保持水平
下一篇：如何從身體背景影像周圍洗掉空白？