ヘッダーは固定しますが、CSSとHTMLを介してコンテンツを非表示にする方法はありますか？

Question

私はこの絵に似たものになりますHTMLとCSSでページ作成しようとしている：

をしかし、私はそれをしようとするたびに、コンテンツdivはヘッダdiv後ろに行くと、私はやるべきmargin-それを得るために、トップが、私はこれは私が試したCSSコードである

...それは応答設計のための悪いアイデアだと思う：

.header{ 
    width:83%; 
    height:62%; 
    background: url('bg.jpg'); 
    position:fixed; 
} 

Answer 1

あなたはpositionningとスクロールをflexを使用することができます。

基本テンプレートは、2つの要素<header>と<main>で作ることができます。

例

および任意のコンテンツと

html { 
 
    height:100%; 
 
    } 
 
body { 
 
    display:flex; 
 
    flex-flow:column; 
 
    height:100%; 
 
    margin:0; 
 
    } 
 
main { 
 
    flex:1;/* fills whole space left */ 
 
    overflow:auto;/* i scroll if space too short */ 
 
    background:yellow;/* see me */ 
 
    }

<header> any content here , <br/>no matter my height</header> 
 
<main> content all the way down, i'll be scrolling if necessary</main>

：

html { 
 
    height: 100%; 
 
} 
 
body { 
 
    display: flex; 
 
    flex-flow: column; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
main { 
 
    flex: 1; 
 
    overflow: auto; 
 
    background: yellow; 
 
} 
 
/* extra demo purpose */ 
 
nav ul { 
 
    display: flex; 
 
} 
 
header {background:red;}

<header> 
 
    <h1>HTML Ipsum Presents</h1> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#">About</a> 
 
     </li> 
 
     <li><a href="#">Clients</a> 
 
     </li> 
 
     <li><a href="#">Contact Us</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header> 
 
<main> 
 
<h1>HTML Ipsum Presents</h1> 
 

 
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris 
 
    placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis 
 
    tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p> 
 

 
<h2>Header Level 2</h2> 
 

 
<ol> 
 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
 
    <li>Aliquam tincidunt mauris eu risus.</li> 
 
</ol> 
 

 
<blockquote> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis 
 
    elit sit amet quam. Vivamus pretium ornare est.</p> 
 
</blockquote> 
 

 
<h3>Header Level 3</h3> 
 

 
<ul> 
 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
 
    <li>Aliquam tincidunt mauris eu risus.</li> 
 
</ul> 
 

 
<pre><code> 
 
#header h1 a { 
 
\t display: block; 
 
\t width: 300px; 
 
\t height: 80px; 
 
} 
 
</code></pre> 
 
    </main>

Answer 2

デフォルトでは、bodyをbであろうウィンドウがオーバーフローするとスクロール可能になります。

スクロール可能な部分だけをスクロール可能にするには、要素上にテキストを指定し、ウィンドウ内に収まるだけのスペースを占めるようにしてください（ボディがスクロール可能にならないようにします）。一つの方法だ

html, 
body { 
    height: 100%; 
} 

body { 
    margin: 0; 
} 

#header { 
    font-size: 26px; 
} 

#content { 
    overflow-y: scroll; 
    height: calc(100% - 36px); // accounts for height of header, occupies rest of available height 
} 

、私はしかしbodydisplay: flexを与えることを好むだろう。利用可能なスペースの残りの部分を自動的に占めます。

body { 
    display: flex; 
    flex-direction: column; 
} 

https://jsfiddle.net/JackHasaKeyboard/zhjsocfv/4/