如何在我的主页上只使用一个部分

Question

我想在屏幕的白色部分使用我的主页，如图片中所示。

但是，如您所见，标题已显示在屏幕的 left-top 角。

我该如何处理？

我只想用半个屏幕作为内容。 header 图片和导航栏应保持固定

header .img-area {
  position: fixed
}

nav {
  display: flex;
  flex-direction: column;
  background-color: #021e34;
  width: 500px;
  height: 100vh;
  left: 25em;
  position: fixed;
  text-align: center;
}

<!-- Header -->
<header>
  <div class="img-area">
    <img src="./Images/photo1.jpg" alt="photo1" />
  </div>
</header>

<!-- Navbar -->

<nav>
  <a href="#" class="logo">LOGO</a>

  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Curriculum Vitae</a></li>
    <li><a href="#">Specials</a></li>
    <li><a href="#">References</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>

  <div class="icons">
    <i class="fab fa-youtube"></i>
    <i class="fab fa-facebook-square"></i>
  </div>

  <small>©2021 Cihan Özcan</small>
</nav>

<!-- Main -->

<main>
  <!-- Home Section -->
  <section id="home-sec">
    <h2>Title</h2>
  </section>
</main>

如何设置主要部分？

Answer 1

您的 <nav> 和 <header> 都是 position: fixed - 这意味着它们 在文档流 之外。

因此，您需要清楚地指出您的 <main> 元素距文档左侧的右侧有多远，因为没有此信息，浏览器会假定 top - 第一个 流内元素 （在本例中 <main>）的左角 是 左上角 浏览器视口。

要让浏览器知道您的 <main> 元素从右边开始，您需要给它一个 margin-left.

为此，您需要：

给你的 <header> 一个明确的宽度 - 比方说 400px
给你的 <main> margin-left 的 900px（即 400px + 500px）

示例：

header {
width: 400px;
}

main {
  margin-left: 900px;
}

进一步阅读：

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction#positioning_techniques

如何在我的主页上只使用一个部分

How can I use only one section for my home page

css

css-position