如何根据身体的填充拉伸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下降的原因。

删除填充或减小元素的宽度。

Answer 2

body {
    background-color: lightgray;
    padding: 30px 100px 0 100px;
}
header {
    text-align: center;
}
nav {
    line-height:30px;
    width:20%;
    float:left;
    padding:5px;
}

#main {
    width: 70%;
    float:left;
    padding:10px;
}

我将宽度更改为70％，因为你有很多填充。 （同样从position: relative中删除了#main，主要部分内是否有position: absolute的内容？）

也将宽度更改为70％，因为你有很多填充。