DIV與家長的視口100％

我不知道如何設置一個div的高度爲其父母的100％視口。DIV與家長的視口100％

目標是在其他div（「歡迎屏幕」）+文本里面有一個可滾動的div。「歡迎屏幕」應該填充完整的視口，以便在滾動後才能看到下面的文本。內部的「歡迎屏幕」應該是一箇中心標誌。

我嘗試了很多東西，但無法找到一個解決方案，它給出了額外的div Joomla生成。

我產生的jsfiddle來說明這個問題：https://jsfiddle.net/z8xy6ttL/

#outer { 
    height: 300px; 
    width: 400px; 
    overflow: auto; 
} 

.welcome-screen { 
    background-color: darkred; 
    height: 100%; 
    position: relative; 
} 

.article-wrap { 
    height: 100%; 
    min-height: 100%; 
    background-color: aquamarine; 
    overflow: auto; 
} 

article { 
    padding: 30px; 
    text-align: left; 
    display: table-cell; 
}

這就是我試圖存檔，但動態：https://jsfiddle.net/hausmaster/z8xy6ttL/3/

會感謝你的幫助。謝謝！

來源

2016-05-25 user1658080

的可能的複製[製作度100％的高度[瀏覽器窗口]（http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window） – rnevius

由於'＃outer'是300px，你能不能僅僅把高度做成'。歡迎屏幕'300px？或者你在尋找更具動態性的解決方案？ –

的確，我正在尋找一個動態解決方案。 – user1658080

這裏更新的jsfiddle：https://jsfiddle.net/z8xy6ttL/5/

我剛搬來的。歡迎屏幕DIV到.article換行，並設置其位置以絕對的。

而且我加入這個CSS文章標籤：

position: relative; 
top: 100%;

如果你想設置的歡迎屏幕上的內容，中間的垂直對齊，必須將它的顯示屬性設置爲表並更新其HTML來：

<div class="welcome-screen"> 
    <div class="display-table-cell"> 
    Welcome Screen 100% 
    </div>  
</div>

定義此CSS類：

.display-table-cell { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
}

來源

2016-05-26 00:12:09

呃..我已經分享了一個完整的屏幕示例15分鐘前.. –

非常感謝！ @RachelGallen - 他的動態適應父母的高度:-) – user1658080

不知道我是否完全理解這個問題，但是您將#outer設置爲300x400。這裏面所有div將採取100％認爲

來源

2016-05-25 23:28:37 mcky

不，在我的例子中沒有。它應該看起來像是我將歡迎屏幕的高度設置爲230px。這就是我想爲#outer的任何給定大小存檔的「外觀」。 – user1658080

它將佔用寬度的100％，而不是高度。 OP希望它佔據視口高度的100％。 –

變化100%到100vh在歡迎類的，它會工作

https://jsfiddle.net/RachGal/z8xy6ttL/1/

（你實際上並不需要的！重要）

有點填充可能看起來更好，所以可能將其大小設置爲較低的百分比 - 在小提琴中，60vh運行良好。（但這將有所調整，如果你希望你的div更大）（300 60％是180，但佔30像素頂部和底部填充 - 240）

https://jsfiddle.net/RachGal/4duqzsh2/

來源

2016-05-25 23:39:22

100vh需要** body **視口的100％ - 但我希望100％的**父視口。就好像我將歡迎屏幕設置爲230px高度 - 但它可以動態地工作。 – user1658080

@ user1658080你甚至看過小提琴嗎？有用。父母是可滾動的div，對嗎？那麼這就是它的高度..否則我不明白你的意圖是什麼..你想如何看待？ –

我用一個例子更新了這個問題。提前致謝！ – user1658080

-1

在你有你的HTML代碼得到如下：

<div class="article"> 
... 
<div class="welcome">...</div> 
... 
</div>

你的類.article需要一個30像素填充，然後.welcome類不會將你的頁面。

來源

2016-05-25 23:39:46 enrique

嗨@enrique，歡迎來到SO。你的回答不清楚，而且不完整。請查看[如何寫出一個好的答案？]（http://stackoverflow.com/help/how-to-answer）尋求幫助;你可以[編輯你的答案]（http://stackoverflow.com/posts/37449325/edit）來改進它。 –

DIV與家長的視口100％

回答

相關問題