css - 如何在具有动态高度的固定 div 标题后设置 div 内容的样式

标签 css html position fixed

以下情况:

<body>
 <div style="position:fixed; width:100%">[place holder for header]</div>
 <div style="position:relative;width:100%;margin-top:100px">[content]</div>
</body>

我需要 header 始终可见并位于顶部,所以这个 header 应该使用 position:fixed。 header-height 自行调整后出现问题。如果标题高于 100 像素,则部分内容将被隐藏。

我如何 (CSS) 动态设置内容 div 关于标题结尾的起始位置。

最佳答案

我仍在寻找仅 CSS 的解决方案,但目前这里有一个仅使用一行 JavaScript 的想法 – 在使用 jQuery 时:

JavaScript

$(document).ready(function () {
    $('#content').css('marginTop', $('#header').outerHeight(true) );
});

HTML

<body>
    <div id="header" style="[…]">[place holder for header]</div>
    <div id="content" style="[…]">[content]</div>
</body>

使用 .outerHeight(true) 的优势在于,它会处理您可能已应用于页眉的边框和边距。

关于css - 如何在具有动态高度的固定 div 标题后设置 div 内容的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11286141/

相关文章:

css - 我可以替换 <details> 元素的展开图标 (▶) 吗?

javascript - 选项卡不会在其选项卡 Pane 中加载内容

javascript - laravel Livewire 电线 :click not firing the function

javascript - 检测从网站安装的软件

c - 如何检查输入数组是否有数字,并将其在输出数组中相应的索引位置加1?

css - 页脚位于浏览器底部,但不在内容下方

css - 绝对位置和 margin 底部

html - 将我的 Logo 放入我创建的每个网站的页脚的最佳方法是什么?

html - CSS 更新 :after when input is checked

javascript - 可以使用 CSS 或 HTML 从个人 ucoz 网站中删除广告吗?