当我为更大的屏幕调整窗口大小时，边栏 div 似乎会随着窗口移动，在 mainContent div 和边栏 Div 之间创建一个空间。
目标:无论窗口大小如何，我都希望两个 div 都位于网站的中间，彼此相邻(想想 Facebook)。
有人可以帮助我吗？谢谢。
* {
background-color: black;
}
.wrapper {
display:flex;
z-index: 0;
}
.topDiv{
background-color: rgb(255,255,255);
width:100%;
height: 100px;
position:fixed;
top:0;
left:0;
z-index: 1;
}
.Nav{
background-color: rgb(60,60,60);
width:100%;
height:50px;
position:fixed;
top:100px;
left:0;
z-index: 2;
}
.content{
background-color: rgb(255,255,255);
width:100%;
height:100%;
position:fixed;
top:150px;
left:0;
z-index:3;
}
.mainContent{
background-color: rgb(125,125,125);
position:fixed;
width:65%;
max-width: 720px;
height:100%;
left:10%;
z-index: 4;
}
.sidebar{
background-color: rgb(160,160,160);
position:fixed;
width:15%;
max-width: 240px;
height:100%;
right:10%;
z-index: 5;
}
.footer{
background-color: rgb(51, 56, 60);
position: fixed;
width: 100%;
height:75px;
bottom:0;
left:0;
z-index: 6;
}<!DOCTYPE html>
<html>
<!-- DRAFT HOUSE INC. -->
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="topDiv">
</div>
<div class="Nav">
</div>
<div class="content">
<div class="mainContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque malesuada turpis ex, ut egestas nisi tincidunt non. Nulla auctor ullamcorper lectus, nec aliquet nulla pulvinar et. Etiam sit amet tortor metus. Morbi ut molestie quam, non vestibulum lorem. Sed lectus diam, malesuada sit amet maximus non, fermentum a justo. Proin leo neque, egestas at enim at, consequat ultricies lorem. Curabitur in nisi velit. Quisque quam tortor, blandit sed tellus ut, sollicitudin suscipit risus. Ut sit amet pretium est. Cras lobortis diam vitae varius auctor. Ut interdum felis et quam lacinia gravida.
Nulla varius fermentum leo ut porttitor. Aenean viverra commodo ante ut rutrum. Morbi sed pellentesque felis. Curabitur fringilla justo massa, porta accumsan sem mollis et. Aenean eu massa id justo semper facilisis in ac ligula. Aenean laoreet, arcu eget condimentum consequat, turpis eros dignissim erat, in vehicula dui arcu ac elit. Donec sit amet massa accumsan, viverra tellus quis, tincidunt nibh. Donec in justo at sem rhoncus blandit id sit amet ipsum.
</div>
<div class="sidebar">
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>最佳答案
您可以做的是删除 max-width 并将 mainContent 的宽度设置为 66%，请在此处检查。
https://jsfiddle.net/estvwpvz/
.mainContent{
background-color: rgb(125,125,125);
position:fixed;
width:66%;
height:100%;
left:10%;
z-index: 4;
}
关于html - 调整窗口大小时，我的侧边栏和 mainContent div 会分开；怎么修？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40416393/