gpt4 book ai didi

html - Bootstrap : stretch the content div in the center

转载 作者:行者123 更新时间:2023-11-28 05:10:31 25 4
gpt4 key购买 nike

我想将内容 div 填充到页眉和页脚中间的空间。

目前页眉和页脚的样式使用`bootstrap:

标题:

<nav id="header" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
...
</div>
</nav>

页脚:

<nav id="footer" class="navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid">
test footer
</div>
</nav>

内容:

<div id="content" class="panel panel-default">
...
</div>

内容div的CSS代码是

.content{
position: absolute;
top: 50px;
left: 0px;
right: 0px;
bottom: 50px;
overflow-y: auto;
}

如果页眉/页脚高度固定为 50px,效果会很好。一旦页眉/页脚高度因屏幕尺寸不同而发生变化,您有什么想法可以做。

enter image description here

最佳答案

您可以使用媒体查询并为您的页眉/页脚具有不同高度的每个屏幕尺寸定义 div 高度。

https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries

也许您可以与您的代码共享一个 jsfiddle?

关于html - Bootstrap : stretch the content div in the center,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39587234/

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