絕對的小孩div沒有尺寸相對父縮放比例

我有一個問題，被問了一千多次，我花了整個上午閱讀simulair問題，但不能讓我的固定，所以希望任何人都可以幫助我。絕對的小孩div沒有尺寸相對父縮放比例

這是我的演示：http://jsfiddle.net/skunheal/4qx6a/1/

#one{ 
width:100%; 
min-height:100%; 
background-image:url('http://www.vloerenmantegels.nl/upload/userfiles/Ariostea_Pietre_Black_Ardesia_wi1.jpg'); 
background-attachment:fixed; 
color:#fff; 
} 

#two{ 
width:100%; 
min-height:100%; 
background-color:transparent; 
position:relative 
} 

#content{ 
min-height:60%; 
position: absolute; 
bottom:0px; 
background:#ff9900; 
}

我有3個的div，全部100％的高度的第一個div（div.one）具有安裝固定所述第二個div（div.two）具有圖象一個橙色的文本框div（div.container），它位於絕對和底部：0px，所以它堅持div.two的頁腳。 div.two有一個透明背景（它的白色在小提琴中，因爲我不能將它設置爲透明）

現在，當您開始縮放窗口時，您會看到橙色框（div.content）將開始向上展開，因爲文本有空間horizantal，但只要它的div 2的整個高度繼續前進並開始重疊div.one，雖然我希望它可以將它自己壓向div div，使其plen div.two變大。

我該如何解決這個問題，因爲我無法找到一種不使用javascript的方法。

來源

2014-01-29 Merijn dk

絕對定位的項目**是正常內容流**之外的**（如果我有一美元......）。這種行爲就是它應該做的。嘗試使用相對定位。 –

或者，你可以設置一個'margin-top'頂部容器的高度來抵消它。 –

我做到了。但是這樣我就不會把它放到底部，因爲一切都是動態的。所以我不能使用設置的邊距和東西。例如，如果我添加margin-top：40％，則爲 –

我做了一個類似的，你可以使用。這工作正常，如果我正確地理解你的問題。

的HTML

<div id="one"></div> 
<div id="two"> 
    <div id="content"></div> 
</div> 
<div id="three"></div>

的CSS

* { 
    margin:0; 
    padding:0; 
} 
body, html { 
    height:100%; 
} 
#one { 
    width:100%; 
    height:100%; 
    background:pink; 
} 
#two { 
    position:relative; 
    width:100%; 
    height:100%; 
    background:transparent; 
} 
#content { 
    width:100%; 
    background:grey; 
    border-top:3px solid black; 
    position:absolute; 
    bottom:0; 
    min-height:60%; 
} 
#three { 
    width:100%; 
    height:100%; 
    background:green; 
}

工作Fiddle Link

來源

2014-01-29 13:02:43

不行這個不工作。看看div.ree。而不是容器向上擴展到div.one。它現在向下擴大，並超過div.three –

thanx的工作...但它仍然無法正常工作。如果你添加了很多文本div.content和規模它，你會看到內容超過div.one .. –

http://jsfiddle.net/4qx6a/2/

定位相對。

順便說一句，你的容器和多個在裏面上設置min-height:100%可能是不想要的效果，除非你想每一個佔用窗口的整個高度。

來源

2014-01-29 13:03:17

嗯..沒有任何股利是100％現在。 http://www.randomshirts.nl/letterfabriek8/看看這個div div one and two，看看在縮放 –

@Merijndk時會發生什麼，只需要強制100％的文字高度。見http://jsfiddle.net/4qx6a/3/ –

好，這是行得通的。但div的內容不堅持div.two的底部，因爲底部：0不適用於相對的div。 –

絕對的小孩div沒有尺寸相對父縮放比例

回答

相關問題