好的,我认为这将是您最快的解决方案。您已经拥有了很好的HTML结构,但我将进一步缩小范围。这里是JsFiddle。
使用您的代码:
#maincontainer {
width:100%;
height: 100%;
}
我进行了一些小的调整,如下所示:
#maincontainer {
width:100%;
height: 100%;
display:inline-block;//added this
}
接着,我也对另外两个东西进行了重构,方法如下:
#leftcolumn {
float:left;//added this
width: 100px;
height:100%;
background: blue;
}
#contentwrapper {
float:right;//added this
width:100%;
height: 100%;
background-color: red;
}
现在在这个JsFiddle中,我已经创建了一个特定的宽度,因此您可以随时更改它。请记住,如果您将100%用作宽度,并尝试在同一行中添加其他内容,则会自动创建两行,如下所示:
#leftcolumn {
display:inline-block;<-- changed this above.
width: 100px;<----This won't work with the below
height: 100%;
background: blue;
}
#contentwrapper {
display:inline-block;<---- changed this above.
width:100%;<---- This won't work with the above
height: 100%;
background-color: red;
}
但如果您将其重构为以下形式:
#leftcolumn {
display:inline-block;
width: 10%;<---This will work with the below
height: 100%;
background: blue;
}
#contentwrapper {
display:inline-block;
width:90%;<---This will work with the above.
height: 100%;
background-color: red;
}
需要注意几点,我在JsFiddle中添加了高度以便查看实际尺寸,并且也添加了宽度以确保精确。一个非常有用的提示可以帮助你进行实现和基本的"为什么会生效"是这个。
如果某些内容对您无效,请在下面评论。