1
私が修正したい問題は、自分のサイトの任意の地域「穴」に入れることができる独自のコンテナの封筒に入れる必要があるということです。DIVコンテナにHTML/Body CSSを適用する
+------------+------------------+
| header | |
+------------+ |
| | |
| content | |
| | |
+------------| |
| footer | |
+------------+------------------|
または空のモーダル地域：左の
+------------------+------------+
| | header |
| +------------+
| | |
| | content |
| | |
| +------------|
| | footer |
+------------------+------------+
または空き領域：例えば、右側の空き領域が
+-------------------------------+
| |
| +---------------+ |
| | header | |
| +---------------+ |
| | content | |
| +---------------+ |
| | footer | |
| +---------------+ |
| |
+-------------------------------+
アイデアは「持っていることです私が再利用できるコンセプトは、HTMLまたはボディの次元に依存しないということです。下の2番目のフィドルを見ると、HTML/Body CSSを模倣したコンテナ・エンベロープを作成しようとしましたが、正しく表示されません。
は、私は私のプラットフォーム内のどこにでも置くことができるテンプレートを作成しようとすると、それは見ており、同様に機能しています：ロックヘッダー、フッターロック、スクロールコンテンツを。私は95％ありますが、最後の部分を理解できません。このフィドルでは、テンプレートは必要に応じて機能しますが、最も外側のCSSはHTMLとBodyに適用されています。コンテナDIVにその外側のCSSを適用する必要があります。 https://jsfiddle.net/SmittyXyvid/pg9ogay7/5/
HTML：
<div class="Header">
Header
</div>
<div class="Content">
<div class="CloseButton"><i class="fa fa-times-circle fa-3x fa-pull-right"></i></div>
<p>Test</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>Test</p>
</div>
<div class="Footer">
<span><h3>Footer</h3>Descriptive Text</span>
</div>
はCSS：
html, body {
height:100%;
min-height:100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.Header {
flex: 0 0 auto;
border-bottom: 1px solid #7f7f7f;
height: 30px;
}
.Content {
flex: 1 1 auto;
overflow-y: scroll;
background-color: black;
color: white;
}
.CloseButton {
padding: 5px;
color: #7f7f7f;
}
.Footer {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
border-top: 1px solid #7f7f7f;
height: 100px;
text-align: center;
padding-bottom: 15px;
}
はどんなに私はそれを適用する方法、それは右に見えることはありません。ここではそれを修正するの私の試みは、次のとおりです。 https://jsfiddle.net/SmittyXyvid/pg9ogay7/6/
HTML：
<div class="Container">
<div class="Header">
Header
</div>
<div class="Content">
<div class="CloseButton"><i class="fa fa-times-circle fa-3x fa-pull-right"></i></div>
<p>Test</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>This is a large amount of scrollable content.</p>
<p>Test</p>
</div>
<div class="Footer">
<span><h3>Footer</h3>Descriptive Text</span>
</div>
</div>
CSS：
.Container {
height:100%;
min-height:100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.Header {
flex: 0 0 auto;
border-bottom: 1px solid #7f7f7f;
height: 30px;
}
.Content {
flex: 1 1 auto;
overflow-y: scroll;
background-color: black;
color: white;
}
.CloseButton {
padding: 5px;
color: #7f7f7f;
}
.Footer {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
border-top: 1px solid #7f7f7f;
height: 100px;
text-align: center;
padding-bottom: 15px;
}
任意の助けいただければ幸いです！