Question

是的，现在我已经修复了网格集装箱，但不知何故它不能100％扩展。请告诉我我在哪里做错了。我正在给出发出的CSS。 如果您在全屏幕中看到它，您可以看到外部容器div仍然不是100％。 感谢。

这是 FIDDLE * { -webkit-box-sizing：border-box; -moz-box-sizing：border-box; box-sizing：border-box; }

body {
  margin: 0;
  padding: 0; }

img {
  max-width: 100%; }

.bordered {
  border: 1px solid black; }

.redbordered {
  border: 1px solid red; }

.greenbordered {
  border: 1px solid green; }

.outerContainer {
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
  min-height: 300px;
  width: auto;
  margin-left: 133px;
  background-color: crimson; }
  .outerContainer:after {
    content: "";
    display: table;
    clear: both; }
  .outerContainer .leftSide {
    float: left;
    display: block;
    margin-right: 0%;
    width: 50%;
    background-color: blue;
    min-height: 200px; }
    .outerContainer .leftSide:last-child {
      margin-right: 0; }

.leftNav {
  height: 100%;
  width: 133px;
  background-color: black;
  position: fixed;
  left: 0px; }

Answer 1

当然，position：fixed正是为了这个目的，将元素固定在那个位置，重叠在它下面的所有东西。要有一个没有重叠的常规2列布局，只需尝试这个（有很多方法可以做到这一点，这只是一个使用CSS而不更改HTML）

body {
    margin: 0;
    padding: 0;
    display:block;
    min-height:100%;
}
.leftNav {
    height: 100%;
    width: 10%;
    background-color: black;
    display:inline-block;
    opacity: 0.7;
}
.rightContainer {
    background-color:silver;
    min-height: 300px;
    display:inline-block;
}
.fluid {
    width: 89%;
}

Answer 2

jsFiddle

在流体中移除宽度100％，并将 rightContainer 设为宽度自动和 margin-left 100px

.rightContainer
{
background-color:silver;
min-height: 300px;
width:auto;
margin-left:100px;
}

给流体div提供余量显示水平滚动条

2 个答案: