html - CSS3 - Div width=100% 将内容推送到新行而不是使用剩余空间

Question

我四处寻找这个问题的解决方案，但没有找到任何有效的方法。这有点菜鸟，所以我道歉，但我的 CSS 有点生疏。

我想要做的就是让 2 个 div 元素水平并排对齐，这将占据窗口高度和宽度的 100%。左侧的 div 将具有固定宽度值，右侧的 div 将占用剩余空间。

解决方案可能真的很简单，我确定我缺少导致此问题的 CSS 的基本概念，所以如果您能帮助我，也许可以指点我一些文献来帮助我理解我做错了什么我真的很感激。

Fiddle Link to the code

html代码:

<div id="leftSideBar">Left Sidebar</div>
<div id="content">Content</div>

CSS:

html, body{
    height: 100%;
    width: 100%;
}
#leftSideBar{
    width:175px;
    height:100%;
    background-color:#567880;
}
#content{
    width:100%;
    height:100%;
    background-color:#00a0a0;
}

Answer 1

你可以用 float 代替:

#leftSideBar{
    width:175px;
    height:100%;
    float: left;
    background-color:#567880;
}
#content{
    height:100%;
    background-color:#00a0a0;
}