我是 Mac OS 用戶，我發現了一些奇怪的東西。
這是示例代碼。
header{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 58px;
background-color: #3d3d3d;
}
.wrapper{
max-width: 500px;
border: 1px solid red;
box-sizing: border-box;
height: 100%;
margin: auto; /* to make align center */
}
main {
max-width: 500px; /* same as .wrapper */
width: 100%;
height: 120vh; /* to make scrollbar */
margin: auto; /* to make align center */
padding-top: 58px;
border: 1px solid blue;
box-sizing: border-box;
}<header>
<div class="wrapper">123</div>
</header>
<main>main</main>
您可以看到 header 和 main 之間的差距。
但是我轉到System PreferencesMac，單擊General并將Show scroll bars選項更改為When scrolling，它顯示如下圖所示。
即使我設定了Show scroll bars選項，如何對齊標題和主要的布局always？
- 專案清單
uj5u.com熱心網友回復：
考慮以下代碼。我在 CSS 中放置了注釋
* {
/* all elements are now border box */
box-sizing: border-box;
}
header {
position: fixed;
top: 0;
left: 0;
/* changed from 100vw to 100% */
width: 100%;
height: 58px;
background-color: #3d3d3d;
/* aligns wrapper element to the center of the header no matter its contents height */
display: flex;
align-items: center;
justify-content: center;
}
.wrapper {
/* use width or min width because contents may not be 500px wide */
min-width: 500px;
border: 1px solid red;
}
main {
/* use max width because you dont want your main element wider than 500px */
max-width: 500px;
/* to make scrollbar */
height: 120vh;
/* 0 margin on top and bottom and auto for left and right */
margin: 0 auto;
padding-top: 58px;
border: 1px solid blue;
}<header>
<div class="wrapper">123</div>
</header>
<main>main</main>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/359020.html
上一篇：使用MacOS/iTerm2/ZSH連接到AWSEC2服務器時出現“setlocale:LC_CTYPE:cannotchangelocale(UTF-8)”