2012-12-05 88 views
1

我最近在掙扎着這些div。例如,看看下面這段代碼:如何調整div的高度到其內部絕對div的高度?

<div class="container"> 
{ 
    width: auto; 
    height: auto; 
} 
    <div class="content"> 
    { 
     width: auto; 
     height: auto; 
    } 
     <div class="upload"> 
     { 
      width: 400px; 
      margin-left: 600px; 
      position: absolute; 
     } 
     </div> 
    </div> 

    <div class="footer> 

    </div> 
</div> 

首先這實際上是在屏幕上的一個小畫(coudn't得出任何更好):

-------------------------------------- 
|    CONTAINER   | 
| _____________________________ | 
| [  CONTENT = = = = =] | 
| [     = UPLOAD =] | 
| [     =  =] | 
| [     =  =] | 
| [     =  =] | 
| [     =  =] | 
| [     =  =] | 
| [     =  =] | 
| [     =  =] | 
| [     =  =] | 
| [     = = = = = ] | 
| [       ] | 
| [       ] | 
| [       ] | 
| [       ] | 
| [       ] | 
| [       ] | 
| [       ] | 
| [___________________________] | 
| _____________________________ | 
| [   FOOTER   ] | 
| [___________________________] | 
-------------------------------------- 

當類upload變大在高度上,由於絕對定位,它漂浮在containercontent格之外。

我需要找到一種方法來調整此container的或content的大小爲upload股利。

當我的風格上傳類是這樣的:

position: relative; 
float: right; 
padding-right: 500px; 

它的工作原理,但只有在這個分辨率。如果放大,此填充會混淆content(在左側)和upload(在右側)。保留餘量現在是如此,這很好,因爲upload div還有一些東西,無論分辨率如何,都需要這麼小的空間。

因此,任何人... 任何想法?

編輯

對於第二個我,雖然我受夠了。

的問題,如果你給upload在我的情況的屬性position: relative是它推動內容beneat的upload DIV中的一切....

所以我position: relative;取代.upload並添加任何周圍一個新的div是content內(除upload ofcourse)

.insidecontent 
{ 
float: left; 
position: absolute; 
top: 170px; 
} 

但現在content高度等於的upload高度,當它」 s小於content.insidecontent它被切斷。

對不起,我不能在jsfiddle中給出一個好的代碼示例,它並不真正顯示我在網頁上看到的內容。

+0

您的代碼是沒有意義的更新代碼。您在混合HTML和CSS – Matanya

+0

Ofcourse HTML和CSS代碼是分開的。這裏的代碼只是爲了這個想法。 –

+1

@IvanM在[jsfiddle](http://jsfiddle.net/)中過去它 –

回答

2

您可以使用相對定位,這將幫助你很多。具有以下細節

.upload{ 
    width: 25%; 
    position: relative; 
    top: -24%; 
    left: 69%;  
} 

Sample Code

+0

沒有真正的工作。內容中的表單變爲上傳div。或者我必須將表單放在新的div中? –

+0

我認爲最好不要使用百分比,但是在放大或縮小頁面時會出現混亂。 –