css嵌套最小高度佈局

我嘗試使用嵌套最小高度div和滑動頁腳來實現佈局。css嵌套最小高度佈局

問題當然在於內部最小高度div沒有擴展到外部div的整個高度，因爲外部div高度是用最小高度設置的。

下面是HTML：

<div class="container"> 
    <section class="pos-container"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, voluptates, qui eos dignissimos quae nobis at provident voluptatum dicta nesciunt possimus iusto vitae nihil hic assumenda aspernatur quos vel necessitatibus.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, voluptates, qui eos dignissimos quae nobis at provident voluptatum dicta nesciunt possimus iusto vitae nihil hic assumenda aspernatur quos vel necessitatibus.</p> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, voluptates, qui eos dignissimos quae nobis at provident voluptatum dicta nesciunt possimus iusto vitae nihil hic assumenda aspernatur quos vel necessitatibus.</p> 
    </section> 
</div> 

<footer> 
    i'm footer 
</footer>

和CSS：

body { 
background-color: grey; 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
overflow-y: scroll; 
} 

.container { 
    z-index: 1; 
    position: relative; 
    width: 100%; 
    min-height: 100%; 
    background-color: pink; 
    margin-bottom: 6em; 
} 

.pos-container { 
    position: relative; 
    width: 50em; 
    min-height: 100%; 
    margin: auto; 
    background-color: green; 
} 

footer { 
    z-index: 0; 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    height: 6em;  
}

FIDDLE #1 在這種小提琴在內的div（綠色）的高度不擴展到外的高度DIV（粉紅色）。

FIDDLE #2 好象固定如果我設置外div的高度從最小高度，以高度，但有另一個問題，如果內div的高度爲100％以上，你可以在FIDDLE #3

見有沒有任何純粹的CSS解決這個問題？

在此先感謝！

來源

2014-03-28 arkhon

是不是隻要雙方如果div的高度：100％不會做的伎倆？或者那不是你所追求的？ –

不完全。如果我這樣做，內部div的內容高於100％，內容溢出，但divs不擴大。 overflow：auto屬性不起作用，因爲它會創建第二個滾動條。 – arkhon

取出高度body或使其height:auto; 入住這FIDDLE

CSS改變

body{ 
    height:100%; // remove this and add below line 
    height:auto; 
}

來源

2014-03-28 13:39:43 James

不幸的是，這也不起作用。如果內容不如100％高，則外部和內部div將摺疊到內容的高度，但它們必須具有至少100％的高度。你可以看到我的意思，如果你改變我的小提琴＃1身體的高度自動。儘管感謝您的建議。 – arkhon

所以你想讓內部div有100％的最小高度，即使內容較少？ – James

是的。如果內容更長，外部div和內部div應該具有100％的最小高度並擴展。 – arkhon

css嵌套最小高度佈局

回答

相關問題