Question

请参阅上面链接中的代码段。我正在尝试实现固定标题，固定左导航持有者，固定右内容持有者和可滚动的中间内容持有者（滚动条出现在浏览器窗口而不是div元素）。我面临两个问题：

div.middle {-webkit-calc(100% - 300px);}

为什么中间内容持有者的左右两侧都有8px的间隙？即使在计算宽度后，它也不会改变（参见上面的代码）。
为什么当内容增长并超出屏幕尺寸时，中间内容持有者的背景颜色不会填满整个空间？

Stack Overflow不允许我在没有代码段的情况下发布此问题，因此发布HTML代码以供参考。可以在jsfiddle链接中找到关联的CSS代码。

<body>
    <div class="container">
        <div class="header">
        </div>
        <div class="content">
            <div class="left">
            </div>
            <div class="middle">
                <p align="right">hello</p>
                <p>hello</p>
                <p align="right">hello</p>
                <p>hello</p>
            </div>
            <div class="right">
            </div>
        </div>
    </div>
</body>

Answer 1

您看到的差距是因为浏览器添加...

body {
 margin: 8px;
}

...默认情况下。

您可以在CSS中覆盖它。

.middle的高度未延长，因为您使用的是height。请尝试使用min-height。另请注意，middle底部有一个边距。

fiddle

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

div.container {
  height: 100%;
  width: 100%;
  position: relative;
}

div.header {
  height: 50px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #558c89;
}

div.content {
  margin-top: 50px;
}

div.left,
div.right {
  width: 150px;
  top: 50px;
  bottom: 0;
  position: fixed;
  background-color: #74afad;
}

div.middle {
  margin: 50px 150px;
  background-color: #ececea;
  min-height: 100%;
}

div.content,
div.left,
div.right {
  height: 100%;
}

div.left {
  left: 0;
}

div.right {
  right: 0;
}

<html>

<head>
  <title>Layout</title>
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open Sans">
</head>

<body>
  <div class="container">
    <div class="header">
    </div>
    <div class="content">
      <div class="left">
      </div>
      <div class="middle">
        <p align="right">hello</p>
        <p>hello</p>
        <p align="right">hello</p>
        <p>hello</p>
        <p align="right">hello</p>
        <p>hello</p>
        <p align="right">hello</p>
        <p>hello</p>
        <p align="right">hello</p>
        <p>hello</p>
        <p align="right">hello</p>
        <p>hello</p>
        <p align="right">hello</p>
        <p>hello</p>
        <p align="right">hello</p>
        <p>hello</p>
        <p align="right">hello</p>
        <p>hello</p>
        <p align="right">hello</p>
        <p>hello</p>
        <p align="right">hello</p>
        <p>hello</p>
        <p align="right">hello</p>
        <p>hello</p>
      </div>
      <div class="right">
      </div>
    </div>
  </div>
</body>

</html>

Answer 2

如果你没有运行“reset css”，大多数元素都会有默认样式。在您的情况下，<p>获得了margin和padding

在你的例子中，我通过执行此css删除边距和填充到所有元素来添加一个快速的

* {
  padding: 0;
  margin: 0;
}

demo

我会调查类似Normalize css

的内容

为什么2 <div>正在考虑不同的屏幕宽度进行渲染？

2 个答案: