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

Question

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

当我将边框应用到第二个（内容）列时，我让它通过页脚到达页面底部，而我需要它的底部边框在页脚上方约 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/

score 0 · Accepted Answer

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

我变了

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

至

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

score 0 · Accepted Answer

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

删除了由于滚动条而导致的#footer {right:18px}（滚动条可以不同，请参阅如何计算滚动条的宽度？了解如何计算它）

使内容在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>

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

2 回答 2

Related

Reference