位置絕對，但調整大小父母

我想編碼一個div內的2個div的html。有一個父div沒有寬度或高度..寬度是瀏覽器的寬度和高度沒有指定。我想在這個父div，2 divs：第一個需要有一個寬度或250像素，第二個需要有屏幕的其餘部分寬度。他們都錯過了高度......取決於它裏面有多少內容。現在我試圖讓這樣的：位置絕對，但調整大小父母

<div id="calendar"> 
     <section id="list"> 
     </section> 

     <section id="grid"> 
     </section> 
</div>

像這樣的CSS：

#calendar { 
    margin: 0 auto; 
    position: relative; 
    overflow: hidden; 
} 
#calendar #list { 
    background: #f00; 
    position: absolute; 
    width: 250px; 
    left: 0; 
    top: 0; 
} 
#calendar #grid { 
    background: #0f0; 
    position: absolute; 
    left: 250px; 
    top: 0; 
    right: 0; 
}

現在的問題是，父DIV犯規調整大小時，我將內容添加到孩子的DIV

我希望有一個解決方法與CSS來解決這個問題，這將是不好的，通過JS做到這一點。

謝謝你，丹尼爾！

來源

2012-06-28 Pacuraru Daniel

你需要使用'position：absolute'嗎？你可以使用'position：static'和'float'來實現這一點，父母將保持其高度 –

我試着你的例子，我會進一步的問題，因爲第二個div沒有寬度大小..所以如果我添加一個div裏面，並將其設置爲父母的100％，它將在第一個div下面 –

我在這裏做了1個小提琴http://jsfiddle.net/yY2wy/7/ –

這裏是我的解決方案 - >http://tinkerbin.com/Z8mJmItU

浮球隨其給定寬度#list，然後給#grid相同保證金左。

然後，讓兩列看起來像他們有100％的父容器的高度，你需要一個圖像。在你不得不使用「實際圖像」之前。今天，您可以簡單地依靠css3漸變來獲得更快的頁面加載速度（對圖像的http請求減少1個）。這看起來可能更復雜，但實際上並不是那麼複雜。它甚至可以給您更多的靈活性，因爲您可以在不需要創建新圖像的情況下更改列的寬度和顏色。所有你需要的是改變CSS。

來源

2012-06-28 12:01:06 banzomaikaka

與你的想法和一些小的變化，我做了我想要實現的：D我使用了相對位置的兒童divs和使用margin-left：250px;相反左：250像素，它的作品就像一個魅力..非常感謝你的幫助JOPLOmacedo，並感謝大家的話題！ –

沒問題！很高興我幫了忙。 – banzomaikaka

還沒有工作鏈接 –

如果您打算使用絕對值，則需要指定高度。那麼它應該工作。

編輯

在子元素中使用

position: relative;

。

EDIT 2

也許這一職位將與你所追求的幫助？ Div width 100% minus fixed amount of pixels

來源

2012-06-28 11:23:19 Danny

我現在給他們添加了一個高度，父div仍然是0像素高度 –

我剛剛做了，內容消失 –

你需要它們是絕對的嗎？相對會更容易使父div伸展。 – Danny

不要使用定位，使用float ...與您當前的方法父母將崩潰，唯一的方法來確定所需的父母的高度將是計算最高的子元素的高度（通常，用JavaScript）。

<div id="calendar"> 
     <section id="list"> 
     </section> 

     <section id="grid"> 
     </section> 
     <div class="clear"></div> 
</div>

...和CSS ...

#calendar { 
    margin: 0 auto; 
    position: relative; 
} 
#calendar #list { 
    background: #f00; 
    float:left; 
    width: 250px; 
} 
#calendar #grid { 
    background: #0f0; 
    margin-left: 250px; 
} 
.clear{ 
    clear:both; 
}

這樣的#calendar將高度調整到最高的子元素。另外請記住刪除溢出規則。

...上面爲了簡單起見，你應該看看使用clearfix（通過向#calendar添加一個類） - read more here。

來源

2012-06-28 11:46:16 Jayx

位置絕對，但調整大小父母

回答

相關問題