親ビューポートの100％のDIV

Question

divの高さを親の100％に設定する方法がわかりませんビューポート。

目的は、他のdiv（「welcome-screen」）+テキストをスクロール可能なdivにすることです。 "Welcome-screen"は完全なビューポートを満たしているはずです。スクロールした後にのみ下のテキストが表示されます。 「ウェルカムスクリーン」の内側は、中心のロゴでなければなりません。

私は非常に多くのことを試みましたが、Joomlaが生成する追加のdivを考えれば解決策を見つけることができませんでした。

は、私は問題を説明するために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/

はあなたの助けをお願い申し上げます。ありがとう！

Answer 1

更新JSFiddle：https://jsfiddle.net/z8xy6ttL/5/

私はちょうど.articleラップに.welcome画面のdivを移動し、絶対にその位置を設定します。

はまた、私は記事のタグにこのCSSを追加しました：

position: relative; 
top: 100%; 

を使用すると、途中に歓迎スクリーンのコンテンツの垂直方向の整列を設定したい場合は、テーブルにその表示プロパティを設定し、にそのHTMLを更新する必要があります：

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

そして、このCSSクラスを定義：[メイクdivの100％の高さの

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

Answer 2

私は質問を完全に理解していますが、＃300x400に設定しているかどうかはわかりません。 （あなたが実際には必要ありません！重要）この内部のすべてのdiv要素は、その

Answer 3

変更歓迎クラスの100vhに100%の100％がかかりますし、それが

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

うまくいく

詰め物のほうがよく見えるかもしれませんので、より低い％にサイズ変更してください - フィドルでは、60vhがうまく機能します。 （しかし、あなたはあなたのdivが大きくなりたい場合は、これは調整する必要があります）（300の60％は180ですが、30px上下のパディングを占める - 240）あなたが持っているあなたのHTMLコード内

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

Answer 4

以下だ：

は

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

あなたのクラスは.article 30pxのパディングを必要とし、.welcomeクラスがあなたのページを埋めることはありません。ここで