將動態高度的相對div定位到另一個相對格

Question

我有一個簡單的問題，使我浪費了兩天而沒有任何成功。我是一名CSS初學者，所以如果我提出一些愚蠢的問題，請原諒。

的jsfiddle

• http://jsfiddle.net/0npx527e/

問題

我有三個主要的div '頭'， 'contentContainer' 和 '尾' 的網頁。 contentContainer中有一個名爲「content」的div。內容div應包含多個部分（我使用purecss來表示網格中的每個部分）

部分應包含兩個div'divA'和'divB'。現在'divA'應該有動態高度，divB應該有固定的高度。意思是如果我調整瀏覽器的大小，'divA'應該隨着c部分一起調整大小。下面的屏幕截圖直觀地顯示了我描述的內容

現在我不明白的是以下幾點：

1. 爲什麼 'DIVB' 不在 '節' 的底部div的底部雖然是0？

2. 爲什麼我不能將'divA'放在頂部/底部？它沒有工作，所以我不得不把它放在高度屬性。

   .divA{ 
       position: relative; 
       top: 0; 
       bottom: 100px; 
       ............ 
   } 
   

   代替

   .divA{ 
       position: relative; 
       height: 85%; 
       ........... 
   } 
   

3. 爲什麼 'DIVB' 走 '部分' DIV外？這對我來說沒有意義！ 'divA'應該相對於'section'來定位，爲什麼它不尊重父div的邊界？以下截圖顯示了我的意思。

• Note_1我讀的地方，我可以用絕對定位，而不是相對定位兩者的div： '耍大牌' 和 'DIVB'。然而，絕對定位我不會有'divA'的動態高度

• Note_2我不會有'divA'和'divB'中的元素。只是背景顏色或圖像。所以基本上我想'節'div來填充'內容'區域，雖然它沒有指定高度的孩子。

請，如果有人向我解釋此行爲背後的原因，我真的很感激。我想用CSS定位元素將是合乎邏輯的，但事實證明，它不是^^（我失蹤肯定的東西）

UPDATE

感謝@Florian你的答案。我發現你的建議有一個問題。我加

overflow:hidden; 

後的contentContainer喜歡你的建議，「DIVB」就是「節」 DIV去下。我想要達到的行爲是'divB'應該保持在相同高度「100px」的位置。 'divA'應該調整容器大小。 http://jsfiddle.net/oqe3bjxe/

如何這個問題能解決？

關於你的答案，

1. 確定。
2. 有道理我猜讀「3」後
3. 我不確定孩子是否知道父母的寬度和高度。感謝澄清。
4. 爲什麼？使用相對定位有什麼問題？
5. 爲什麼？

對不起，提出了很多問題。我真的很想明白。

如果不建議使用相對位置，那麼我想肯定有更好的方法來實現這一點。有人可以讓我看看使用JSFiddle的最佳實踐如何做到這一點？

由於事先 特發

Answer 1

我有點從頭開始。我使用基於頂部，底部，右側，左側，高度和寬度值的固定位置。對於黃色的div，我只使用了頂部和底部值。這將導致容器適應調整瀏覽器的大小。其他容器都有固定的高度。請注意，div在固定位置的html中並不重要。最後，我使用邊距放置內容以避免固定元素。檢查出的代碼，你應該能夠弄清楚：JSFiddle

我希望這是你在找什麼（因爲我不是100％確定你想要什麼）。我想我會很快聽到:)。

Simpliefied HTML

<div id="header"></div> 
<div id="content"> 
    <div id="dummytext"></div> 
</div> 
<div id="divA"></div> 
<div id="divB"></div> 
<div id="footer"></div> 

CSS

#header{/*changed closing tags in html to: <div id="header"></div>*/ 
    position: fixed; 
    top: 0px; 
    height: 50px; 
    left: 0px; 
    right: 0px; 
    background-color: blue; 
    border-bottom: white solid 20px; 
} 
#divA{ 
    position: fixed; 
    bottom: 170px; /*no height but top/bottom values so containers height changes based on browsersize*/ 
    top: 70px; 
    left: 0px; 
    right: 50%; 
    background-color: yellow; 
} 
#divB{ 
    position: fixed; 
    bottom: 70px; 
    height: 100px; 
    left: 0px; 
    right: 50%; 
    background-color: red; 

} 
#footer{ 
    position: fixed; 
    bottom: 0px; 
    height: 50px; 
    left: 0px; 
    right: 0px; 
    background-color: blue; 
    border-top: white solid 20px; 
} 
#content{ 
    margin: 70px 2% 70px 55%; /*margins to place scrollable content avoiding fixed content to appear on top of the content*/ 
} 
#dummytext{/*Just some dummy text to see what happens with scrollbar*/ 
    height: 1000px; 
    width: 100%; 
    background: linear-gradient(red, orange, yellow, green, blue);/*all colors of the rainbow, just because..*/ 
} 

Answer 2

的問題是，你沒有一個高度的contentContainer類。

您可以添加以下CSS解決這個問題：

.contentContainer{ 
    overflow:hidden; 
} 

有很多錯誤。

1.保證金：0自動，如果您有位置固定不起作用。

2.位置：相對只需要頂部和左側的屬性，這意味着底部和右側不會影響它。

3.如果要給出子元素的百分比高度，請確保您具有容器的高度（例如1500px）。 ％將根據父母的高度進行計算，並且如果父母沒有高度，則無法工作。

4.我不會推薦使用那麼多的位置：相對。使用容器的margin-top可以更容易實現。

5.如果你有一個固定的頁腳，確保你補充一些padding-bottom身體。

Answer 3

我已經找到了解決辦法。
當你有position: relative;在.section，它裏面的每個position: absolute;將相對於它定位，而不是頁面。

從MDN：

相對：
此關鍵字勾畫出的所有元素，就好像元件被 沒有定位，然後調整元件的位置，而不 改變佈局（並因此留下了它會在 已被定位的元素的差距）。位置的影響：相對 對錶 - * - 組，錶行，表 - 列，表格單元和 表標題元素未定義。

絕對：
不要留下空間爲 元素。相反，將其定位在相對於其最接近的定位祖先或包含塊的 的指定位置。絕對地 定位框可以有邊距，它們不會與任何其他 邊距合攏。

我已經完成fiddle。

.section { 
    background-color: red; 
    position: relative; 
    bottom: 0; 
    top: 0; 
    height: 100%; 
    /*put this uncommented if youll want the black box to minimize with the whole thing 
    overflow: hidden*/ 
} 

.divA { 
    background-color: green; 
    height: 85%; 
    width: 100%; 
    /*width: calc(100% - 14px); optional, works in some browsers, use with margin*/ 
    position: absolute; 
    top: 0px; 
    /*you can remove this if you don't want red visible 
    margin: 0 7px;*/ 
} 

.divB { 
    background-color: black; 
    position: absolute; 
    bottom: 0px; 
    height: 100px; 

    width: 100%; 
    /*width: calc(100% - 14px); optional, works in some browsers, use with margin*/ 
    background-color: black; 
    /*you can remove this if you don't want red visible 
    margin: 0 7px;*/ 
} 

你有兩個選擇，在取消

• overflow: hidden; .section僞時變得比100px的小會減少暗箱
• width: calc(...); margin: 7px 0px;將使框變小，使紅色可見。

測試一下。我希望我已經回答了你的問題。

編輯：哦，我完全忘了height: 85%;財產，當然，作爲@RMo指出，這並不時.section超過666px高的工作。
將height: 85%;替換爲bottom: 100px或使用calc（）：height: calc(100% - 100px);。

我是calc（）的忠實粉絲。雖然，它不支持all browsers，但差不多。

讓我知道，@TeFa，如果它幫助你瞭解一些CSS。 :)

Answer 4

有很多答案。 我的答案不是真正的答案，但是當我開始的時候，提示可以幫助我很多。你試過類似reset.css的東西嗎？每個瀏覽器都有不同的默認值，它將css的所有屬性設置爲零，因此在此之後，您可以最終編寫自己的CSS。

你只需將它包含在你的css文件之前。

它看起來像

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

原來網站是here。

希望能幫助你一點點.. ^^

Answer 5

當我明白你的問題，你要課裏面顯示DIVB。 爲此，您需要對CSS進行一些更改。

.divA { 
    background-color: green; 
    max-width: 1000px; 
    max-height: 1080px; 
    height: 100%; 
    position: relative; 
    top: 0; 
    margin: 0 7px 0 7px; 
} 

添加新的CSS

.divA{ 
    margin-bottom: -100px; 
} 

.divB, 
.divA:after { 
    height: 100px; 
}