admin管理员组

文章数量:1611400

在做标签栏时，需要将标签位置固定，便于点击查看相关内容。
标签在设置了position:fixed之后，其空间不会保留，出现内容滚动占用其空间，超出显示的问题见红色框。很多解决办法添加容器进行占位：
解决办法1：

.content{
    position:fixed;
    top:0;
    height:40px;
    width:100%;
    z-index:-1;
    background:red;
}

给内容添加容器，将fixed保留的空间进行占位。但是效果不理想，出现以下红色条，下面的内容会出现无法滚动的问题 ，此方法不可行。但是对于内容占据少于body高度时，还行。
改进办法：

content {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    /* color:#333333; */
    border-width: 1px;
    border-color: #a9c6c9;
    border-collapse:separate;
    border-spacing:10px 0px;
    background:red;
    position:fixed;
    top:0;/*把需要设置位置固定的样式，添加top，消除红色条*/
    margin-top:0;
    }

效果如下：

以上就解决了内容溢出，又不影响内容滚动。

本文标签： 内容Positionfixed

版权声明：本文标题：position：fixed内容溢出处理 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1728605284a1165372.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。