獲取div的高度爲屏幕高度，但隨內容擴展

我有一個位置絕對（必填）的div位置，絕對位置爲absolute（必填），我希望子div是設備的寬度但隨着內容的擴展而延伸。在將此標記爲重複之前，請注意我已查看this和this等多個問題。獲取div的高度爲屏幕高度，但隨內容擴展

我的CSS（SASS）：

.container 
    position: absolute 
    overflow: visible 
    width: 100% 

.page 
    position: absolute 
    overflow: visible 
    width: 100% 
    min-height: 100vh

我的HTML

<div class="container"> 
    <div class="page"> 
     //content 
    </div> 
</div>

採用這種設置，頁面DIV不與內容延伸。我究竟做錯了什麼？

來源

2015-03-30 Julien Vincent

可以請你提供演示頁？這裏 – vsync 2015-03-30 18:34:22

**重複的問題就是解決方案** [如何讓DIV固定高度，但如果成長含量比高度更大？] [1] [1]：http://stackoverflow.com/questions/8473273 /如何使高度固定在高度但增長如果內容是高於高度？rq = 1 – 2015-03-30 18:38:39

此解決方案不起作用。不是重複的。 – 2015-03-30 18:40:13

我解決它通過增加第三分度的100vh一個最小高度，然後將所有子元素中使用位置去：相對

CSS：

.container 
    position: absolute 
    overflow: visible 
    width: 100% 

.second-container 
    position: relative 
    width: 100% 
    min-height: 100vh 

.page 
    position: absolute 
    overflow: visible 
    width: 100% 
    min-height: 100vh

HTML：

<div class="container"> 
    <div class="page"> 
     <div class="second-container"> 
      //child elements with position: relative 
     </div> 
    </div> 
</div>

來源

2015-03-31 20:43:24

添加height: 100%和width: 100%;到你的身體標記是這樣的：

html, body { 
    height: 100%; 
    width: 100%; 
}

然後加入min-height: 100%;到容器是這樣的：

.container { 
    position: absolute; 
    width: 100%; 
    min-height: 100%; 
}

最後加height: auto;給你的孩子的div像這樣：

.page { 
    position: absolute; 
    width: 100%; 
    height: auto; 
}

以下是與上述代碼的的jsfiddle：https://jsfiddle.net/AndrewL32/e0d8my79/33/

來源

2015-03-30 18:47:40

如果上述內容不是您想要的，請詳細說明您要做的事情。 – 2015-03-30 18:48:48

此解決方案不起作用。它導致div完全不顯示。另外我不認爲我需要詳細說明其他事情嗎？我提供了一個示例URL – 2015-03-30 18:51:24

雖然這使我困惑，因爲它在你的jsFiddle中工作，但不在我的項目中。 – 2015-03-30 18:56:41

獲取div的高度爲屏幕高度，但隨內容擴展

回答

相關問題