gpt4 book ai didi

html - 将固定侧边栏和流动内容与推拉类相结合

转载 作者:行者123 更新时间:2023-11-28 03:14:41 25 4
gpt4 key购买 nike


简而言之:这就是我想要实现的目标:https://jsfiddle.net/Pintolus/faz88ayh/33 (您必须调整结果窗口的大小才能看到效果)但是#Content Div 应该填满#Sidebar 旁边的其余屏幕空间。在小屏幕上,侧边栏仍应移动到 #Content 下。


这是我想要实现的:应该有 3 个 div:

  • #Sidebar,位于左侧,宽度固定
  • #Content,位于右侧,宽度可变
  • #Footer,位于页面底部,全宽

这没什么大不了的,但我希望#Sidebar 在小屏幕上移动到#Content 下方。这本身也不是什么大问题,可以通过使用 Bootstraps 推类和拉类来实现。

问题是,我不知道如何将这两个问题结合起来。我希望侧边栏的宽度固定(直到它向下移动)并且移动到 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 (您必须调整结果窗口的大小)。现在我希望这个 fiddle 中的边栏宽度固定(例如 100 像素)。

请帮忙,这让我发疯。

PS: position: absolute 侧边栏没有解决方案,因为它会覆盖页脚(由于不同的高度)。

最佳答案

不确定你的推/拉是如何工作的,但我假设它是出现在你的两个 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;
}

关于html - 将固定侧边栏和流动内容与推拉类相结合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28784068/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com