如何修复标题但不通过CSS和HTML隐藏内容？

Question

我正在尝试在HTML和CSS中创建一个与此图片类似的页面：

但是每当我尝试这样做时，内容div都会落在标题div后面，我应该做一些保证金来降低它，但我认为对于响应式设计来说这是一个坏主意...

这是我尝试过的CSS代码：

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

Answer 1

您可以使用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 { 
	display: block; 
	width: 300px; 
	height: 80px; 
}
</code></pre>
  </main>

Answer 2

默认情况下，body在窗口溢出时将变为可滚动。

如果您只想让包含文本的部分可滚动，请在元素上指定它，并确保它只占用足够的空间以适应窗口内部（因此身体不会变得可滚动）。 / p>

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
}

这是一种方式，但我更喜欢给body display: flex。它会自动计算剩余的可用空间。

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

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