在「位置：固定」元素（prev元素與當前固定元素不重疊）上有一個「真實」空間的CSS

我有一個具有兩個水平列（左邊是固定的）和底部邊框（也是固定的）的佈局，這是第二個（內容）列的低潮。在「位置：固定」元素（prev元素與當前固定元素不重疊）上有一個「真實」空間的CSS

當我將邊框應用於第二個（內容）列時，我會將其通過頁腳轉到頁面底部，而我需要它的底部邊框大約爲頁腳上方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/

來源

2012-10-23 Davit

由於您的頁腳是固定高度，可以用保證金來得到你想要的。

我改變

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

到

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

來源

2012-10-23 17:25:15 Becuzz

謝謝，但問題仍然存在，因爲當你不滾動到頁面底部的元素仍然重疊的頁腳，因此藍色邊框仍處於底部。只有當您滾動到底部時，問題似乎才能解決，但不幸的是它仍然存在。 – Davit

添加下一個軀多種元素，但在具有背景顏色＃內容：#FFF，包含具有240像素左邊距和藍色另一元件邊框頂部。

刪除＃頁腳{右：部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>

來源

2014-08-06 13:04:29

在「位置：固定」元素（prev元素與當前固定元素不重疊）上有一個「真實」空間的CSS

回答

相關問題