CSS 在“位置：固定”元素处具有“真实”空间（上一个元素不与当前固定元素重叠）

【问题标题】：CSS having a "real" space at "position:fixed" element (prev element not overlapping a current fixed one)CSS 在“位置：固定”元素处具有“真实”空间（上一个元素不与当前固定元素重叠）
【发布时间】：2012-10-13 16:50:34
【问题描述】：

我的布局有两个水平列（左侧是固定的）和一个底部页脚（也是固定的），它位于第二（内容）列的下方。

当我将边框应用到第二个（内容）列时，我让它通过页脚到达页面底部，而我需要它的底部边框在页脚上方大约 50 像素。

我需要这个，因为我要将背景图像应用于内容，它不应该通过（甚至触摸）页脚和左列（目前这不是问题）

请有人帮我解决我的问题。

这是一个代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
            html
            {
                height:100%; 
                max-height:100%;  
                padding:0; 
                margin:0; 
                border:0; 
                background:#fff -18px 0 no-repeat; 
                overflow: hidden; 
            }

            body
            {
                height:100%;
                max-height:100%;
                overflow:hidden;
                padding:0;
                margin:0;
                border:0;
            }

            #content
            {
                display:block;
                height:100%;
                max-height:100%;
                overflow:auto;
                padding-left:240px;
                position:relative;
                z-index:3;
            }

            #head
            {
                position:fixed;
                margin:0;
                top:0;
                right:18px;
                display:block;
                width:100%;
                height:100px;
                background:#ddd;
                z-index:5;
                color:#fff;
            }

            #foot
            {
                position:fixed;
                margin:0px;
                bottom:-1px;
                right:18px;
                display:block;
                width:80%;
                height:50px;
                background:rgb(214,100,50);
                color:#fff;
                text-align:right;
                z-index:4;
            }

            #left
            {
                position:fixed;
                left:0;
                top:0;
                height:100%;
                width:200px;
                background:#aaa;
                background-position:0 100px;
                color:#fff;
            }

            * html #head, * html #foot,* html #left
            {
                position:absolute;
            }

            #pad1
            {
                display:block;
                width:18px;
                height:100px;
                float:left;
            }
            #pad3
            {
                display:block;
                width:18px;
                height:50px;
                float:left;
            }
            .pad2
            {
                display:block;
            }
        </style>
    </head>

    <body>

        <div id="foot">
            <div id="pad3"></div>
            <br />
            {footer}
        </div>

        <div id="left">
            <div class="pad2"></div>
            {menu}
        </div>

        <div id="content">
            <div style="border:2px solid blue;">
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
              text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />

            </div>
        </div>
    </body>
</html>

如果有人能帮助我，我将非常感激。

这是我的问题的图片链接（视觉效果）：http://postimage.org/image/h46ilcfgr/

【问题讨论】：

    标签： css fixed space overlap


    【解决方案1】：

    在页脚下添加了一个元素，但在 #content 之上，背景颜色为：#fff，包含另一个元素，左边距为 240 像素，顶部为蓝色边框。

    删除了因滚动条而导致的#footer {right:18px}（滚动条可以不同，请参阅How to calculate the width of the scroll bar? 了解如何计算）

    使内容在body中流动，所以使用的滚动条就是body中的那个。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
        html
        {
            height:100%; 
            max-height:100%;  
            padding:0; 
            margin:0; 
            border:0; 
            background:#fff -18px 0 no-repeat; 

        }

        body
        {
            height:100%;
            max-height:100%;

            padding:0;
            margin:0;
            border:0;
        }

        #content
        {
            display:block;

            padding-left:240px;
            position:relative;
            z-index:3;
        }

        #head
        {
            position:fixed;
            margin:0;
            top:0;
            right:18px;
            display:block;
            width:100%;
            height:100px;
            background:#ddd;
            z-index:5;
            color:#fff;
        }

        #foot
        {
            position:fixed;
            margin:0px;
            bottom:-1px;
            right:0;
            display:block;
            width:80%;
            height:50px;
            background:rgb(214,100,50);
            color:#fff;
            text-align:right;
            z-index:5;
        }

        #left
        {
            position:fixed;
            left:0;
            top:0;
            height:100%;
            width:200px;
            background:#aaa;
            background-position:0 100px;
            color:#fff;
            z-index:6;
        }

        * html #head, * html #foot,* html #left
        {
            position:absolute;
        }

        #pad1
        {
            display:block;
            width:18px;
            height:100px;
            float:left;
        }
        #pad3
        {
            display:block;
            width:18px;
            height:50px;
            float:left;
        }
        .pad2
        {
            display:block;
        }

        #underfooter{ background-color:#fff; position:fixed; bottom:0; width:100%; height:100px; z-index:4; }
        #underfooter .padding{ margin-left:240px; border-style:solid; border-width:2px 0 0; border-color:blue; }
    </style>
</head>

<body>

    <div id="foot">
        <div id="pad3"></div>
        <br />
        {footer}
    </div>

    <div id="underfooter">
        <div class="padding">
        {under footer}
        </div>
    </div>

    <div id="left">
        <div class="pad2"></div>
        {menu}
    </div>

    <div id="content">
        <div style="border:2px solid blue;">
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />
          text, text, text, text, text, text, text, text, text, text, text, text, text, text, text<br />

        </div>
    </div>
</body>

    【讨论】：

      【解决方案2】：

      由于您的页脚是固定高度，您可以使用边距来获得所需的内容。

      我变了

      <div style="border:2px solid blue;">

      到

      <div style="border:2px solid blue; margin-bottom:75px;">

      【讨论】：

      • 谢谢，但问题仍然存在，因为当您不滚动到页面底部时，元素仍会与页脚重叠，因此蓝色边框仍位于底部。只有当您滚动到底部时，才会出现问题，但不幸的是它仍然存在。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2011-06-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-09-07
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode