我的网站内容有一个侧边栏和一个区域。侧边栏是固定的，但是页面内容可以滚动。然而，当浏览器窗口调整大小时，页面内容 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>
</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>非常感谢任何帮助!这可能是我错过某个地方的简单事情？谢谢!
最佳答案
因为您的侧边栏是 position: fixed，所以它脱离了布局的常规流程， float 将不会按照您期望的方式工作。
尝试在 #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>© 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>关于html - 如何在调整浏览器窗口大小时阻止 Div 移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45510317/