Question

我遇到了正确定位两个容器的问题。

有一幅彩绘图像，它看起来像是什么样的。

click here to see

我只想滚动文章，标题标题和侧边栏nav应粘贴到页面上。

问题是我不知道如何正确编写代码使其看起来像图片中的那样（我的意思是这两个标题和侧边栏）。这是我已经制作的代码。

＆＃13;

.page-header {
  width: 100%;
  height: 57px;
  display: flex;
  position: relative;
  background: linear-gradient(#011A25, #022C3F 40%);
  box-shadow: 0px 3px 15px grey;
  display: inline-block;
}

.page-header h1 {
  width: 100vw;
  text-align: center;
  font-size: 38px;
  padding-top: 7px;
  color: #fcfcfc;
  font-weight: 800;
  text-shadow: 0px 0px 4px black;
}

.site-nav {
  height: 100%;
  width: 400px;
  position: fixed;
  /*stay in place*/
  z-index: 1;
  right: 0px;
  background-color: #011018;
  transition: 0.5s;
  box-shadow: 0px 3px 17px #011018;
  display: inline-block;
}

.main-content {
  height: 100%;
  width: 65%;
  margin: 30px auto;
}

.single-article {
  background-color: #fdfdfd;
  padding: 20px;
  color: #292929;
  box-shadow: 0px 0px 4px grey;
}

＆＃13;

<body>
  <nav class="site-nav">
    <header class="nav-header">
      <h2>Spis treści</h2>
    </header>
    <section class="nav-menu">
      <a href="#"><span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span>Interfejsy</a>
      <hr>
      <a href="#">Procesory<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
      <hr>
      <a href="#">Przechowywanie danych<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
      <hr>
      <a href="#">Grafika<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
      <hr>
      <a href="#">Linux<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
      <hr>
      <a href="#">Sieci komputerowe<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
    </section>
  </nav>
  <header class="page-header">
    <h1>
      Podstawy technik programowania
    </h1>
  </header>
  <main class="main-content">
    <article class="single-article">
      <header class="article-title">
        <h1>Wstęp</h1>
      </header>
      <span class="split-line"></span>
      <div class="article-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </article>
  </main>

</body>

＆＃13;

Answer 1

我发布了一个与同一问题相关的工作示例，我使用css的flex属性创建了它

希望它能帮到你..

<强> Fiddle link

注意 - 有一个油漆图像，它看起来像是什么样的。

＆＃13;

body {
  margin: 0px;
  padding: 0px;
}

.main {
  display: flex;
  justify-content: flex-start;
  flex-flow: row wrap;
}

.box {
  display: flex;
  flex-direction: column;
  width: 70%;
  min-height: 100vh;
}

.header {
  background: tomato;
}

.content {
  flex: 1 0 0;
  background: green;
  overflow: auto;
}

.footer {
  background: blue;
  position: relative;
}

.right-side {
  width: 30%;
  background: yellow;
  height: 100vh;
}

＆＃13;

<div class="main">
  <div class="box">
    <div class="header">
      Header
    </div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi magnam iusto fugit illo omnis aperiam mollitia non fugiat, at in ratione harum ullam alias dicta, excepturi quod sed delectus veniam?<br><br> Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Nisi magnam iusto fugit illo omnis aperiam mollitia non fugiat, at in ratione harum ullam alias dicta, excepturi quod sed delectus veniam?<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi magnam iusto fugit
      illo omnis aperiam mollitia non fugiat, at in ratione harum ullam alias dicta, excepturi quod sed delectus veniam?<br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi magnam iusto fugit illo omnis aperiam mollitia non fugiat,
      at in ratione harum ullam alias dicta, excepturi quod sed delectus veniam?<br><br>
    </div>
    <div class="footer">
      Footer
    </div>
  </div>
  <div class="right-side">
    Right side
  </div>
</div>

＆＃13;

如何定位页面和侧边栏导航的标题？

1 个答案: