在“position：fixed”元素处具有“真实”空间的CSS（prev元素不与当前固定元素重叠）

时间：2012-10-23 17:13:52

标签： css fixed space overlap

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

当我将边框应用到第二个（内容）列时，我会通过页脚到页面底部，而我需要它的底部边框比页脚高出大约50px。

我需要这个，因为我要将一个背景图片应用于一个内容，这个内容不应该通过（甚至触摸）页脚，也就是左列（这不是现在的问题）

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

这是一段代码：

<!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/

2 个答案:

答案 0 :(得分：0)

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

我改变了

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

到

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

答案 1 :(得分：0)

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

删除了＃footer的{right：18px}，因为滚动条（滚动条可能不同，请参阅How to calculate the width of the scroll bar?了解如何计算）

使内容流在正文中，因此使用的滚动条是正文中的一个。

<!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>

相关问题
最新问题