如何在固定div标题和动态高度后对div内容进行样式化 [英] How to style a div content after fixed div header with dynamic height
问题描述
以下情况：
<body>
<div style="position:fixed; width:100%">[place holder for header]</div>
<div style="position:relative;width:100%;margin-top:100px">[content]</div>
</body>
我需要标题总是可见的和在顶部，所以这一个应该与position：fixed。
自动调整标题 - 高度后出现问题。如果标题大于100px，则部分内容被隐藏。
I need the header always visible and at the top, so this one should be with position:fixed. A problem occurs after self adjustments of the header - height. If the header is higher than 100px a part of the content is hidden.
我如何（CSS）动态设置内容div的起始位置，
How can I (CSS) dynamically set the start position of the content div regarding the end of the header.
推荐答案
我仍然在寻找一个CSS的解决方案，但目前这里是一个想法， JavaScript - 使用jQuery时：
I'm still looking for a CSS only solution, but for the moment here's an idea using just one line of JavaScript – when using 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）是，它照顾您可能已应用于您的标题的边框和边距。
The advantage of using .outerHeight(true) is, that it takes care of borders and margins you may have applied to your header.
这篇关于如何在固定div标题和动态高度后对div内容进行样式化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
