Html 将固定边栏和流体内容与推拉类相结合

简而言之： 这就是我想要实现的：（必须调整结果窗口的大小才能看到效果）但是#Content Div应该填充#侧边栏旁边的屏幕空间。 侧边栏仍应在小屏幕上的#内容下方移动

---

这就是我想要实现的目标： 应该有3个分区：

• #侧边栏，位于左侧，具有固定宽度
• #内容，位于右侧，具有流体宽度
• #页脚，位于页面底部，全宽

这没什么大不了的，但我希望侧边栏在小屏幕上的内容下方移动。这本身也不是什么大问题，可以通过使用Bootstraps推拉类来实现

问题是，我不知道如何将这两个问题结合起来。 我希望侧边栏的宽度固定（直到它向下移动）并在content-div下移动

这是左侧边栏在#内容下移动的代码：

HTML:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-9 col-md-push-3" id="content"></div>
        <div class="col-md-3 col-md-pull-9" id="sidebar"></div>
    </div>
    <div class="row"
        <div id="footer"></div>
    </div>
</div>

（必须调整结果窗口的大小）。 现在我希望这个提琴中的边栏是固定宽度的（例如100px）

请帮帮我，这让我发疯

---

PS:

position:absolute

侧边栏没有解决方案，因为它会与页脚重叠（由于高度不同）。

不确定推/拉是如何工作的，但我假设它是出现在两个div上的类

我想知道通过媒体查询是否更容易做到这一点

无论如何，这里有一种方法（对不起，我对引导的了解几乎为零，所以我选择了一段非常简单的代码）：

HTML:

<div id="sidebar"></div
><div id="content"></div>
<div id="footer"></div>

---

我用必需的容器元素更新了你的fiddle，以消除水平体滚动。希望您不介意。@isherwood没问题，谢谢您可以通过媒体查询来回答：您好，非常感谢您的回答。不幸的是，它不能很好地与应用的引导推拉类一起工作。在我尝试在小屏幕上移动内容下方的侧边栏之前，您的解决方案运行良好。这是因为侧边栏是HTML代码中提到的第一个元素，因此它将始终位于顶部。你可以在这里看到：如果使用这些推/拉类，你像我在“#sidebar.hidden”和“#content.full width”中那样更改侧边栏和内容的宽度，我不明白为什么它不应该工作。侧边栏就在你的小提琴中消失了。啊，好吧，我终于明白你的要求了。抱歉：）这与我想要实现的目标非常接近：现在Content Div应该填充侧边栏旁边的屏幕空间，这将是完美的。

<div id="sidebar"></div
><div id="content"></div>
<div id="footer"></div>

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    font-size: 0; /* to fight the space before the footer due to inline-block */
}
body * {
    font-size: 1rem; /* to reset the font-size */
}
#sidebar {
    display: inline-block;
    background: #CCC;
    height: calc(100% - 100px);
    width: 100px;
    vertical-align: top;
}
#sidebar.hidden {
    display: none;
}
#content {
    display: inline-block;
    background: #111;
    height: calc(100% - 100px);
    width: calc(100% - 100px);
    overflow: auto;
    vertical-align: top;
}
#content.full-width {
    width: 100%;    
}
#footer {
    background: #F00;
    width: 100%;
    height: 100px;
}