我在 link here
中创建了关于问题的小提琴页眉和页脚绝对定位,宽度为100%。中间内容由仪表板表组成。标题由两个图像组成,点击后,将切换内容
当我点击slide-toggle-1
时,会显示headerbottombar
的内容
但中间内容是隐藏和重叠的
如果点击slide-button-1
和slide-button-2
,我该如何正确显示中间内容的内容
我要感谢所有的建议和解决方案。只要提供可行的解决方案,解决方案就可以在 css,jquery和javascript 中使用。
答案 0 :(得分:0)
更新 如果你想要一个粘性到顶部的可变高度标题,你可能必须使用一些动态调整内容的上边距的javascript
var offset = document.getElementById("sticky-top-id").offsetHeight;
document.getElementById("content-id").style.marginTop = offset + 'px';
旧答案:
有很多方法可以达到你想要的效果。一种是将标题的位置更改为relative
(并删除标题和内容之间的换行符)。如果您使用fixed
或absolute
位置,则标题将与正文内容重叠。而相对会在标题扩展时将内容推下来。
请参阅:https://jsfiddle.net/d0pyxdoj/3/
P.S。页眉/页脚在代码中的位置为fixed
,而不是absolute
答案 1 :(得分:0)
为什么不尝试添加一个带有margin-top的类来根据需要降低div。像这样:
.top{
margin-top:100px;
}
使用" .content"将此添加到div中像这样:
<div class="content top">
然后只需点击2次点击即可切换:
$( ".content" ).toggleClass( "top" );
您可以提供其他样式,但这是基本的运行。
答案 2 :(得分:0)
请查看以下示例。使用脚本识别高度我们可以注入间距。
<强>脚本:
function heightCalc(){
topHeight = $('.sticky-top').height();
$('.content').css({"margin-top": topHeight+"px"});
}
示例小提琴手: https://jsfiddle.net/scj4u0t5/1/