Question

当我为大屏幕调整窗口大小时，侧边栏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>

Answer 1

你可以做的是删除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;
}

Answer 2

从mainContent和侧边栏

中删除max-width

当窗口调整大小时，我的侧边栏和mainContent div正在分离;怎么修？

2 个答案: