如何在調整瀏覽器窗口大小時阻止Div移動

我有一個側欄和一個用於我網站內容的區域。邊欄是固定的，但頁面內容可以滾動。但是，當瀏覽器窗口調整大小時，頁面內容div被推向左側，因爲它被設置爲向右浮動，並且我希望它永遠不會比左側更靠近左側（目前它將緩慢隱藏在下方側邊欄內容）。你可以看到正在發生的事情下面的截圖：如何在調整瀏覽器窗口大小時阻止Div移動

第一個屏幕截圖顯示了全屏瀏覽器窗口，並在它下面的一個顯示了它的當調整瀏覽器窗口，如：

如何獲取頁面內容的大小，居中和永遠不會越過側邊欄的位置，因爲當前圖片和下面的文本將隱藏在側邊欄下方，而是希望它調整到側邊欄的大小。我的代碼如下。

/* Main CSS */ 
 
html, body { 
 
    padding: 0; 
 
    margin: 0; 
 
    font-family: "Futura PT", sans-serif; 
 
} 
 

 
    /* Sidebar */ 
 
#sidebar { 
 
    background-color: #FFFFFF; 
 
    width: 400px; 
 
    height: 100%; 
 
    padding: 10px; 
 
    float: left; 
 
    position: fixed; 
 
} 
 

 

 
/* Page Content */ 
 
#pageContentContainer { 
 
    display: block; 
 
    width: 100%; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
} 
 

 
#pageContent { 
 
    float: right; 
 
    width: 78%; 
 
    background-color: #212121; 
 
}

<body> 
 
    <div id="sidebar"> 
 
     <a href="index.html"><img src="images/logo/mdLogo.png"></a> 
 
     <nav> 
 
      <ul> 
 
       <li><a href="index.html">HOME</a></li> 
 
       <li><a href="#">PHOTOGRAPHY</a></li> 
 
       <li><a href="#">GRAPHIC DESIGN</a></li> 
 
       <li><a href="#">3D MODELLING</a></li> 
 
      </ul> 
 
     </nav> 
 
     <div id="socialLinks"> 
 
      <a href="#/" class="fa fa-linkedin fa-3x"></a> 
 
      <a href="#/" class="fa fa-facebook fa-3x"></a> 
 
      <a href="#/" class="fa fa-youtube-play fa-3x"></a> 
 
     </div> 
 
     <p>&copy; Macast Designs 2017</p> 
 
    </div> 
 
    
 
    <div id="pageContentContainer"> 
 
     <div id="pageContent"> 
 
      <!-- Parallax --> 
 
      <div class="parallaxImage1"></div> 
 

 
      <div class="parallaxContent"> 
 
       <h1>A little about me...</h1> 
 
       <p>Information goes here.</p> 
 
      </div> 
 

 
      <div class="parallaxContent"> 
 
       <h1>A little about me...</h1> 
 
       <p>Information goes here.</p> 
 
      </div> 
 

 
      <div class="parallaxContent"> 
 
       <h1>A little about me...</h1> 
 
       <p>Information goes here.</p> 
 
      </div> 
 

 
      <div class="parallaxContent"> 
 
       <h1>A little about me...</h1> 
 
       <p>Information goes here.</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body>

任何幫助，不勝感激！這可能是簡單的我可能錯過了某個地方？謝謝！

來源

2017-08-04 Macast

好吧，如果你永遠不希望它進一步去比它是正確的，也許你應該試着以某種方式解決它，而不是使用浮動？隨着浮動會改變？ –

因爲您的側邊欄是position: fixed它被取出了佈局的正常流程，並且浮動將無法按照您期望的方式工作。嘗試在您的#pageContent div上設置400px的左邊距。見下文。

/* Main CSS */ 
 
html, body { 
 
    padding: 0; 
 
    margin: 0; 
 
    font-family: "Futura PT", sans-serif; 
 
} 
 

 
    /* Sidebar */ 
 
#sidebar { 
 
    background-color: #FFFFFF; 
 
    width: 400px; 
 
    height: 100%; 
 
    padding: 10px; 
 
    position: fixed; 
 
} 
 

 

 
/* Page Content */ 
 
#pageContentContainer { 
 
    display: block; 
 
    width: 100%; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
} 
 

 
#pageContent { 
 
    margin-left: 400px; 
 
    width: 78%; 
 
    background-color: #212121; 
 
}

<body> 
 
    <div id="sidebar"> 
 
     <a href="index.html"><img src="images/logo/mdLogo.png"></a> 
 
     <nav> 
 
      <ul> 
 
       <li><a href="index.html">HOME</a></li> 
 
       <li><a href="#">PHOTOGRAPHY</a></li> 
 
       <li><a href="#">GRAPHIC DESIGN</a></li> 
 
       <li><a href="#">3D MODELLING</a></li> 
 
      </ul> 
 
     </nav> 
 
     <div id="socialLinks"> 
 
      <a href="#/" class="fa fa-linkedin fa-3x"></a> 
 
      <a href="#/" class="fa fa-facebook fa-3x"></a> 
 
      <a href="#/" class="fa fa-youtube-play fa-3x"></a> 
 
     </div> 
 
     <p>&copy; Macast Designs 2017</p> 
 
    </div> 
 
    
 
    <div id="pageContentContainer"> 
 
     <div id="pageContent"> 
 
      <!-- Parallax --> 
 
      <div class="parallaxImage1"></div> 
 

 
      <div class="parallaxContent"> 
 
       <h1>A little about me...</h1> 
 
       <p>Information goes here.</p> 
 
      </div> 
 

 
      <div class="parallaxContent"> 
 
       <h1>A little about me...</h1> 
 
       <p>Information goes here.</p> 
 
      </div> 
 

 
      <div class="parallaxContent"> 
 
       <h1>A little about me...</h1> 
 
       <p>Information goes here.</p> 
 
      </div> 
 

 
      <div class="parallaxContent"> 
 
       <h1>A little about me...</h1> 
 
       <p>Information goes here.</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body>

來源

2017-08-04 15:23:22

謝謝！現在看起來很簡單！我會記住不要使用浮動內容，然後使用固定內容;我可以看到我現在做錯了什麼！ – Macast

我不知道如果我理解這個問題。但我認爲問題在於您使用固定值（px），您可以在（％）中分散寬度，但要始終調整，您將不得不使用媒體查詢。

/* Main CSS */ 
 
html, body { 
 
    padding: 0; 
 
    margin: 0; 
 
    font-family: "Futura PT", sans-serif; 
 
} 
 

 
    /* Sidebar */ 
 
#sidebar { 
 
    background-color: #FFFFFF; 
 
    max-width: 400px; 
 
    width: 20%; 
 
    height: 100%; 
 
    padding: 10px; 
 
    position: fixed; 
 
    display: inline-block; 
 
} 
 

 

 
/* Page Content */ 
 
#pageContentContainer { 
 
    display: block; 
 
    width: 100%; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
} 
 

 
#pageContent { 
 
    position: relative; 
 
    width: 80%; 
 
    left: 20%; 
 
    background-color: #212121; 
 
    display: inline-block; 
 
}

來源

2017-08-04 15:29:07

如何在調整瀏覽器窗口大小時阻止Div移動

回答

相關問題