为流体 div 提供边距显示水平滚动条答案

【问题标题】：giving margin to a fluid div shows horizontal scrollbar为流体 div 提供边距显示水平滚动条
【发布时间】：2014-11-19 17:49:21
【问题描述】：

是的，现在我已经修复了网格外部容器，但不知何故它没有 100% 扩展。请告诉我我在哪里做错了。我正在给出发出的 css。 如果你全屏看到它，你可以看到外部容器 div 仍然不是 100%。 谢谢。

这里是 FIDDLE * { -webkit-box-sizing：边框框； -moz-box-sizing：边框框； box-sizing：边框框； }

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; }

【问题讨论】：

试试这个 - jsfiddle.net/o3jxrve7

标签： html css responsive-design

【解决方案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%;
}

【讨论】：

【解决方案2】：

jsFiddle

在 fluid 中移除 100% 的宽度，并将 rightContainer 设为宽度 auto 和 margin-left 100px

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

【讨论】：