我目前正在製作我的作品集,每次我嘗試在我的部分中添加新的程式碼/專案時,當前的專案會被推到頂部並超出視窗。我不確定是什麼導致我的程式碼出現這種情況。我正在使用JSX,我覺得問題出在我的app.js和app.css上,它們決定了整個React應用程式。這是我的當前CSS:
html{ font-size: 62.5%; } body{ height: 300vh; overflow: auto; background: #136a8a; /*fallback for old browsers */ background: -webkit-linear-gradient( to right, #267871, #136a8a ); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient( to right, #267871, #136a8a ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ color: black } .pages{ position: absolute; left: 40%; top: 40%; transform: translate(-40%, -40%); font-size: 5rem; } /* .scroll{ padding: 12px; height: 2000px; } */ @media only screen and (max-width:1322px){ .pages{ font-size: 3.5rem; padding-top: 1px; } } @media only screen and (max-width:900px){ .pages{ font-size: 2.7rem; } } @media only screen and (max-width:700px){ .pages{ font-size: 2rem; } } @media only screen and (max-width:500px){ .pages{ font-size: 1.5rem; } } @media only screen and (max-width:400px){ .pages{ font-size: 1.2rem; } } @media only screen and (max-width:280px){ .pages{ font-size: 1.1rem; } }
我以為可能是高度不夠的問題,但無論我把它放多高都不行。也可能是定位的問題,但我試圖將頂部的定位調整得更多,但會影響很多東西,我已經根據這個定位調整了大部分的程式碼,請幫忙。謝謝!
您提到您嘗試調整了定位,但是導致了問題,然而,重新評估元素的定位可能是必要的,以確保它們不重疊或被推出,因此您可能需要調整現有項目的
top
或margin-top
值,以防止它們被推上去#body
元素使用了height: 300vh;
,這意味著body的高度始終是視口高度的3倍,如果內容超出了這個高度,可能會出現問題,考慮使用相對單位(如百分比)來設定height
,或讓內容決定高度,而不是使用固定值。您在
body
元素上設定了overflow: auto;
,這可能會導致內容在視口中無法容納時出現滾動條,如果您希望內容可滾動,那麼沒問題,但是如果您希望新內容適應而不滾動,您可能需要調整佈局或內容結構。