絕對定位的div需要底部邊緣上的文件具有固定頁腳

不知怎的，我想不出什麼我失蹤...絕對定位的div需要底部邊緣上的文件具有固定頁腳

我試着定位兩個fixed條（頁眉和頁腳之間的一些absolute的div ）。標題包含一些標籤，頁腳包含版權。我想使用窗口的滾動條，而不是溢出的div，我知道它應該是可能的！

每個絕對定位的div應該帶有一個額外的餘量，以便該div的底部不會消失在頁腳後面。

enter image description here

應該成爲這樣的： enter image description here

我的問題的一個片段是的jsfiddle提供here。

我的HTML：

<ul class="cf tabs"> 
    <li>Tab 1</li> 
    <li>Tab 2</li> 
</ul> 
<div style="margin-top: 40px; padding-bottom: 30px; position:relative"> 
    <div style="position:absolute;top:300px; height:100px; width: 250px; left:200px; border: 1px solid purple;">aaa</div> 

    <div style="position:absolute;top:0px; height:100px; width: 100px; left:100px; border: 1px solid purple;">bbb</div> 

    <div style="position:absolute;top:450px; height:100px; width: 250px; left:400px; border: 1px solid purple;">ccc</div> 
</div> 
<div class="cf footer">Copyright &copy;</div>

我使用的樣式表：

ul.tabs { 
     list-style-type: none; 
     list-style-position: outside; 
     padding:5px; 
     margin: 0; 
     position:fixed; 
     top:0; 
     z-index: 999; 
     background-color: white; 
     left:0; 
     right:0; 
     border-bottom: 1px solid green; 
     opacity: 0.7; 
    } 
    ul.tabs li { 
     float: left; 
     margin:1px; 
     padding: 4px 10px 2px 10px; 
     border: 1px solid black; 
    } 


    div.footer { 
     position: fixed; 
     bottom: 0; 
     left: 0; 
     right:0; 
     background-color:#DEDEE9; 
     border-top: 3px outset #BBBBBB; 
     padding: 5px; 
     opacity: 0.6; 
    } 

    .cf:before, 
    .cf:after { 
     content: " "; 
     display: table; 
    } 
    .cf:after { 
     clear: both; 
    }

難道你們有什麼提示嗎？

額外的信息 正如你所附加的圖片中看到的平方格的右下角紫色邊框重疊固定頁腳。我不想要這個。應該給予底部邊緣的地方，讓每一個DIV攜帶有餘量，所以應該匹配頁腳的頂部

來源

2012-07-11 321X

我真的不明白你的問題。你想達到什麼目的？ – dezman 2012-07-11 20:41:12

不清楚你到底需要什麼。 – 2012-07-11 20:49:13

查看更新後的問題 – 321X 2012-07-11 20:51:29

下面是我提出的解決方案。將最下面的絕對定位div與另一個div包裹在一起，其中底部邊距等於頁腳高度和邊界。我給了它.inner類。

請參閱我的fiddle。

來源

2012-07-11 21:31:12

是的，這似乎是一個非常好的解決方法...讓我玩吧:-) – 321X 2012-07-11 21:43:57

底部填充添加到相當於頁腳的高度文檔body：

body { 
    padding-bottom: 31px; 
}

（JSFiddle似乎沒有讓你修改body元素的樣式，所以我不能發佈小提琴，但它應該可以工作）

來源

2012-07-11 21:06:34 daGUY

不幸的是，這不會改變任何內容...... – 321X 2012-07-11 21:10:42

請嘗試使用'html'元素。或者嘗試'margin'而不是'padding'。 – daGUY 2012-07-11 21:16:36

對不起，對'html'元素也不工作。嘗試'保證金'以及'填充' – 321X 2012-07-11 21:24:30

-3

而不是使用絕對定位的，這樣做：

保證金 - 左起：800像素

保證金 - 頂：500px的

來源

2012-07-11 21:45:12 jaielob

在什麼元素？如果我有多個元素，他們不是在指定的位置浮動，但'堆積' – 321X 2012-07-11 21:49:14

我不是一個專業或任何東西，但我一直有絕對定位的問題，所以我剛開始聲明我的div的左側和頂部邊距並像這樣定位它們。 – jaielob 2012-07-11 21:52:03

試着把兩個div放在一起，如果沒有絕對位置，你不能輕易做到這一點。 – 321X 2012-07-11 21:55:24

絕對定位的div需要底部邊緣上的文件具有固定頁腳

回答

相關問題