html - 如何根据 body 的填充拉伸(stretch)div？

Question

我在使用 CSS 设置样式时遇到了问题。

我无法让#main 适合屏幕。我在左侧有一个菜单，我希望主屏幕位于菜单右侧。

body {
    background-color: lightgray;
  padding: 30px 100px 0 100px;
}

nav {
  line-height:30px;
  width:20%;
  float:left;
  padding:5px;        
}

#main{
  position: relative;
  width: 80%;
  float:left;
  padding:10px;
}

这是现在的截图:

我应该如何将“文档内容”(#main) 放在导航旁边？

编辑:我已将我的代码放在这里:http://jsfiddle.net/47tjbnrt/

Answer 1

问题是由您在宽度上添加填充引起的。 width 是其内容的宽度，您将一个设置为 80%，另一个设置为 20%，然后在其上添加填充。填充是内容周围的区域，因此是宽度。这就是你的第二个 div 下降的原因。

移除内边距或减小元素的宽度。