當我添加新代碼時,物品離開螢幕
P粉376738875
P粉376738875 2023-09-16 23:49:54
0
1
676

我目前正在製作我的作品集,每次我嘗試在我的部分中添加新的程式碼/專案時,當前的專案會被推到頂部並超出視窗。我不確定是什麼導致我的程式碼出現這種情況。我正在使用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;
  }
}

我以為可能是高度不夠的問題,但無論我把它放多高都不行。也可能是定位的問題,但我試圖將頂部的定位調整得更多,但會影響很多東西,我已經根據這個定位調整了大部分的程式碼,請幫忙。謝謝!

P粉376738875
P粉376738875

全部回覆(1)
P粉475126941
  1. 您提到您嘗試調整了定位,但是導致了問題,然而,重新評估元素的定位可能是必要的,以確保它們不重疊或被推出,因此您可能需要調整現有項目的topmargin-top值,以防止它們被推上去

  2. #body元素使用了height: 300vh;,這意味著body的高度始終是視口高度的3倍,如果內容超出了這個高度,可能會出現問題,考慮使用相對單位(如百分比)來設定height,或讓內容決定高度,而不是使用固定值。

  3. 您在body元素上設定了overflow: auto;,這可能會導致內容在視口中無法容納時出現滾動條,如果您希望內容可滾動,那麼沒問題,但是如果您希望新內容適應而不滾動,您可能需要調整佈局或內容結構。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板