如何在调整浏览器窗口大小时阻止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移动

回答

相关问题