重叠动态固定标头

202202

我的固定标题与我的内容重叠。很像这里(位置固定内容重叠问题

但是我的标头是动态的,因此高度有时不总是50px,有时52,100 ...

丹尼尔·安德烈·明卡

尝试将其更好地放置在您的盒子中。

创建固定元素时,它需要一个确切的位置:

例子:

#header{ 
    height: 95px;
    width: 640px;
    position: fixed;
    top: 30px;
    right: 30px;
}

因此,这就是您的浏览器的阅读方式:我将在屏幕的右上角放置一个固定元素:距屏幕顶部30像素,距屏幕右侧30像素。

之所以那些固定的元素是在另一个那是因为他没有定义个顶个的顶部/底部左/右正确位置。添加更多文本,您将看到是否可以滚动固定元素(您不能..)。

将所有内容放入div中,并ID#it#bigBody。给#bigBody一个确切的宽度和高度,比方说1000宽度和600高度。现在添加这些:

#header {
    height: 50px;
    width: 600px;
    position: fixed;
    top: 30px;
    right: 30px;
}

#footer {
    background: #fff;
    bottom: 0;
    right: 0;
    height: 30px;
    width: 600px;
    position: fixed;
}

最小宽度在这里无关紧要...仅在设计需要多个设备访问权限的大型网站(例如iPhone,平板电脑等)时才使用此功能...如果您只是在玩代码而已,则请坚持使用基础知识。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

固定标题重叠

来自分类Dev

固定标头的值

来自分类Dev

如何动态更改jQuery Mobile中的固定标头

来自分类Dev

CSS固定标头仅在元素透明时才与元素重叠

来自分类Dev

CSS固定标头仅在元素透明时才与元素重叠

来自分类Dev

高度固定的CSS固定标头

来自分类Dev

如何在Android中动态地使用带有可滚动内容的固定标头?

来自分类Dev

如何在Android中动态地使用带有可滚动内容的固定标头?

来自分类Dev

防止图像与固定标题重叠

来自分类Dev

防止固定标题重叠内容

来自分类Dev

使用CSS的HTML表固定标头

来自分类Dev

在固定标头之后添加元素

来自分类Dev

偏移固定标头的锚点部分

来自分类Dev

200滚动后的jQuery固定标头

来自分类Dev

关于MQTT固定标头结构?

来自分类Dev

固定标头影响锚点

来自分类Dev

固定标头引导程序的位置

来自分类Dev

PhoneGap上的jQuery移动固定标头

来自分类Dev

如何使用SlickNav制作固定标头

来自分类Dev

使用CSS的HTML表固定标头

来自分类Dev

使固定标头看起来持久

来自分类Dev

GridView固定标头溢出容器

来自分类Dev

平稳滚动的固定标头帐户

来自分类Dev

HTML固定标头失败ID使用

来自分类Dev

内容文本与我的固定标题重叠

来自分类Dev

响应式表格滚动条与固定标题重叠

来自分类Dev

在bootstrap 3 modal中固定标头位置

来自分类Dev

具有固定标头的Angular Js无限滚动

来自分类Dev

引导表固定标头不起作用