Question

坚果壳： 这就是我想要实现的目标：https://jsfiddle.net/Pintolus/faz88ayh/33（您必须调整结果窗口的大小以查看效果），但#Content Div应该填充#Sidebar旁边的屏幕空间的其余部分。补充工具栏仍应在小屏幕上的#Content下移动。

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

#Sidebar，位于左侧，具有固定宽度
#Content，位于右侧，具有流体宽度
#Footer，位于页面底部，为全宽

这不是什么大问题，但我希望#Sidebar在小屏幕上的#Content下移动。仅这一点也不是什么大问题，可以通过使用Bootstraps Push-and Pull-Class来实现。

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

这是在#Content：

下移动左侧边栏的代码

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>

CSS：（仅供演示）

 #sidebar {background: #CCC; height: 150px;}
 #content {background: #111; height: 100px;}
 #footer {background: #F00; height: 100px;}

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

请帮助，这让我发疯。

PS：侧边栏的position: absolute无法解决问题，因为它会与页脚重叠（由于高度不同）。

Answer 1

不确定你的推/拉是如何工作的，我认为它的两个类都出现在你的div上。

我想知道使用媒体查询更容易做到这一点。

无论如何，这是一种方法（对不起，我对bootstrap的了解接近于零，所以我去了一段非常简单的代码）：

http://jsfiddle.net/txLaukqm/1/

HTML：

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

CSS：

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;
}

将固定侧边栏和流体内容与推拉式组合在一起

1 个答案: