CSS 100％ - 200px？

Question

我正在尝试使用<div>个对象和CSS来模拟我正在处理的项目的框架外观。使用以下代码，我可以使用border-right，padding以及（如果我选择）background仅使用一个额外元素正确拉伸左侧列表：

HTML：

<div id="sidebar">
    <div id="sidebar-content">
        <!-- content goes here -->
    </div>
</div>
<div id="content">
    <!-- more content -->
</div>

CSS：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#sidebar {
    float: left;
    height: 100%;
    width: 200px;
    overflow: auto;
    border-right: solid 1px #000;
}

#sidebar-content {
    margin: 10px;
    padding: 0;
    list-style: none;
}

#content {
    position: relative;
    float: left;
    padding: 10px;
}

这很有效，直到我尝试在水平拉伸的内容的顶部添加另一个元素。这是当前的代码：

HTML：

<div id="content">
    <div id="criteria">
        <!-- select boxes -->
    </div>
    <!-- other content -->
</div>

CSS：

#criteria {
    position: absolute;
    left: 0;
    right: 0;
    background: #FF9;
}

此图显示结果

我尝试添加以下规则：

#content {
    width: 100%;
}

虽然这会将#content div拉伸到身体元素的宽度，而不是身体减去侧边栏 - 所以内容出现在折叠下方（并且在左侧边栏下方）

如何使用CSS拉伸条件框以水平填充内容区域？

编辑 -

我想上传卡尔建议之后发生的事情：

  

从float: left移除#content。如果普通块元素旁边有浮动元素，则块元素将填充剩余空间。也不要设置width属性。

以下是移除float: left时发生的事情

关闭，但现在#criteria正在伸展以掩盖侧边栏。其他建议？

Answer 1

从float: left移除#content。如果普通块元素旁边有浮动元素，则块元素将填充剩余空间。也不要设置width属性。

---

修改

为解决#criteria绝对定位强迫自己向左移动的问题，您可以向#content添加左边距以说明边栏的宽度，正如Steven发现的那样

作为一个随机的旁注，这也可以让你在侧边栏不像Steven的例子中那样采取100％高度的情况下保持内容对齐。

Answer 2

我之前使用过这样的东西来获得侧边栏布局

侧栏css

宽度：200px; 的z-index：2; float：left;

内容css

margin-left：200px; z-index：1; 宽度：100％; padding-right：2

您也可以使用类似的技术来获取标题<div>。

我可能没有完全正确的css，但想法是使用margin，padding和z-index的组合来获得类似帧的效果。

Answer 3

一种选择只是让侧边栏和内容区域的宽度基于百分比...侧边栏为20％，内容为80％。我之前遇到过这个问题并且刚刚开始讨论这个问题，但我没有做太多的研究。