Question

我已经创建了一个我尝试尝试的布局模型，但是我遇到了一些问题而且我正在试图弄清楚如何满足我的所有条件。这是堆栈代码段：

// to check if dynamic <aside> content is working
document.getElementById('toggle').addEventListener('click', () => {
	document.querySelector('main').classList.toggle('expanded');
});

* {
  box-sizing: border-box;
}

html, body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: red; /* to see if <body> shows through */
}

main {
  position: absolute;
  width: 100%;
  height: 100%;
}

nav {
  top: 0;
  left: 0;
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 1;
}

nav > .wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
}

nav > .wrapper > header {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  line-height: 50px;
  padding: 0 100px;
  background-color: navy;
  color: white;
}

main.expanded nav > .wrapper > header  {
  height: 100px;
}

main.expanded section {
  padding-top: 110px;
}

.pull-left {
  height: 100%;
  float: left;
}

.pull-right {
  height: 100%;
  float: right;
}

nav > .wrapper > aside {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100px;
  min-height: 100%;
  text-align: center;
  background-color: navy;
  color: white;
}

section {
  position: relative;
  background-color: white;
  width: 100%;
  height: 100%;
  padding-left: 110px;
  padding-top: 60px;
  z-index: 0;
}

section .content {
  position: relative;
  /* to make sure scrolling is correct */
  width: 110%;
  height: 110%;
  background-color: lightgray;
  padding: 10px;
  margin: 10px;
}

<main>
  <nav>
    <div class="wrapper">
      <header>
        <div class="pull-left">Navigation</div>
        <div class="pull-right">
          <button type="button" id="toggle">Header Collapse</button>
        </div>
      </header>
      <aside>Dashboard</aside>
    </div>
  </nav>
  <section>
    <div class="content">
      <button type="button">Clickable</button>
    </div>
  </section>
</main>

以下是我必须满足的条件：

<header>和<aside>必须为position: fixed（已完成）。
当<header>高度发生变化时，<aside>中的内容必须通过向下移动才能保持在视图范围内（已完成）。
内容必须滚动<header>（已经完成）。
内容框必须是可点击的（需要）。
<body>不得显示在内容框后面（需要）。
如果溢出有效（已经完成），则内容框必须可滚动。
必须支持IE 9+（不确定我是否符合此要求）。

请告诉我如何满足所有这些要求。 HTML不需要保持不变，但请保持标签在语义上正确。

标题和内容的CSS布局问题

0 个答案: