Div不會留在框架內

我有一個不會保持放置的div，它會在父級之外移動。我遇到問題的div標記爲「6」。它在父母的外面向右移動。Div不會留在框架內

這是我的代碼。

<!DOCTYPE html> 
<html> 
    <head> 
    <title></title> 
    <style type="text/css"> 
     html{ 
     border:1px solid; 
     height:99%; 
     } 
     body{ 
     height:100%; 
     margin:0; 
     padding:0; 
     } 
     #pageWrapper{ 
     padding:0; 
     margin:0; 
     height:100%; 
     position:relative; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="pageWrapper"> 
     <div style="width:50%;border-right:0px solid;height:100%;float:left;position:relative;"> 
     <div style="width:100%;height:30%;border:1px solid;">1</div> 
     <div style="width:100%;height:40%;border:1px solid;">2</div> 
     <div style="width:100%;height:30%;position:absolute;bottom:0;border:1px solid;">3</div> 
     </div> 
     <div style="width:50%;border:0px solid;height:100%;float:right;"> 
     <div style="width:100%;height:40%;border:1px solid;">4</div> 
     <div style="width:100%;height:40%;border:1px solid;">5</div> 
     <div style="width:100%;height:20%;position:absolute;bottom:0;border:1px solid;">6</div> 
     </div> 
    </div> 
    </body> 
</html>

來源

2012-02-17 Muzz

你想要它在哪裏？ – 2012-02-17 09:15:11

Hay，Nach，divs 3和6應該在父div的地板上 – Muzz 2012-02-17 09:16:00

添加位置：相對於父DIV或刪除位置：從您標記

來源

2012-02-17 09:11:46

謝謝，我不知道我是怎麼錯過的！當時間到期時，我會列出你的答案。 – Muzz 2012-02-17 09:13:43

希望你不會介意將它標記爲正確答案 – 2012-02-17 09:15:14

當然Pal，我現在接受它，但是stackoverflow說我必須等6分鐘才能接受這個正確的答案。 – Muzz 2012-02-17 09:17:57

擺脫position:absolute;bottom:0在下兩個div的DIV絕對 - 這是不必要的，並會導致不穩定的行爲。

來源

2012-02-17 09:13:07

弗洛裏安，如果我擺脫了位置：絕對，divs會如何保持下去？ – Muzz 2012-02-17 09:15:05

因爲他們一個接一個地對齊而停留下來？請參閱：http://jsfiddle.net/Cxg5S/ – 2012-02-17 09:25:28

謝謝Florian。我明白你的意思了。因爲我使用的是100％高度，並且所有的容器都在100％的高度，所以底部的div總是在地板上。所以絕對定位的需要是不必要的。我加了你的帖子。 – Muzz 2012-02-17 17:56:46

Div不會留在框架內

回答

相關問題