我该如何解决这个 html CSS 定位问题

Question

我正在尝试创建 header、左侧导航、内容区域、右侧导航和页脚。但我的内容区域正在拉伸，右侧导航位于内容区域下方。我希望右侧导航位于 header 下方。调整大小时，只有内容区域应该拉伸或缩小 window。我想要的左导航和右导航是固定大小的。我该如何解决这个问题？我是 css 的新人。提前谢谢你。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>My Website</title>
  <style>
    body {
      min-height: 100%;
      position: relative;
      padding: 0;
      margin: 0;
    }
    
    .header {
      background-color: navy;
      color: white;
      position: fixed;
      z-index: 1;
      height: 30px;
      width: 100%;
    }
    
    .main {
      position: relative;
      top: 30px;
    }
    
    .content {
      position: relative;
      left: 230px;
    }
    
    .left-navbar {
      background: steelblue;
      position: fixed;
      top: 30px;
      height: 100%;
      width: 230px;
      z-index: 2;
    }
    
    .content-area {
      position: relative;
      background: aqua;
    }
    
    .right-sidebar {
      position: fixed;
      background: lightblue;
      right: 0;
      height: 100%;
      width: 230px;
      z-index: 3;
    }
    
    .footer {
      background: yellow;
      position: relative;
    }
  </style>
</head>

<body>
  <div class='app'>
    <div class='header'>
      Header
    </div>
    <div class='main'>
      <div class='left-navbar'>
        Left Sidebar
      </div>
      <div class='content'>
        <div class="content-area">
          Content Area
        </div>
        <div class='right-sidebar'>
          Right Sidebar
        </div>
        <footer class='footer'>
          Footer
        </footer>
      </div>
    </div>
    </div>
</body>

</html>

我是这样解决的。有人能告诉我这是标准解决方案吗？谢谢

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
  <style>
    body {
      min-width: 100%;
      padding: 0;
      margin: 0;
      height: 100%;
    }

    header {
      background-color: blue;
      color: white;
      position: fixed;
      width: 100%;
      height: 35px;
      z-index: 1;
    }

    .left-nav {
      background-color: yellow;
      position: fixed;
      top: 35px;
      width: 230px;
      height: 100%;
      z-index: 2;
    }

    .right-sidebar {
      background-color: aqua;
      position: fixed;
      top: 35px;
      right: 0;
      width: 230px;
      height: 100%;
      z-index: 3;
    }

    .content {
      position: absolute;
      top: 35px;
      left: 230px;
      right: 230px;
      width: auto;
    }

    .main {
      background-color: darkgreen;
    }

    footer {
      background-color: darkred;
    }

  </style>
</head>
<body>
  <header>
    Header
  </header>
  <nav class="left-nav">
    Left Navbar
  </nav>
  <div class="right-sidebar">
    Right Sidebar
  </div>
  <div class="content">
    <div class="main">
      <p>The header will stick to the top when you reach its scroll position. The header will stick to the top when you reach its scroll position. The header will stick to the top when you reach its scroll position.</p>
    </div>
    <footer>
      Footer
    </footer>
  </div>
</body>
</html>

Answer 1

你必须移动这个代码块

<div class="right-sidebar"> 
</div>

介于 left-navbar class 和 content class

之间

像这样

<div class='main'>
            <div class='left-navbar'>
                Left Sidebar
            </div>

            <div class='right-sidebar'>
                Right Sidebar
            </div>
            
            <div class='content'>

                <div class="content-area">
                    Content Area
                </div>

                <footer class='footer'>
                    Footer
                </footer>

            </div>
            
        </div>

body {
            min-height: 100%;
            position: relative;
            padding: 0;
            margin: 0;
        }

        .header {
            background-color: navy;
            color: white;
            position: fixed;
            z-index: 1;
            height: 30px;
            width: 100%;
        }

        .main {
            position: relative;
            top: 30px;
        }

        .content {
            position: relative;
            left: 230px;
        }

        .left-navbar {
            background: steelblue;
            position: fixed;
            top: 30px;
            height: 100%;
            width: 230px;
            z-index: 2;
        }

        .content-area {
            position: relative;
            background: aqua;
        }

        .right-sidebar {
            position: fixed;
            background: lightblue;
            right: 0;
            height: 100%;
            width: 230px;
            z-index: 3;
        }

        .footer {
            background: yellow;
            position: relative;
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>My Website</title>
</head>

<body>
    <div>
        <div class='header'>
            Header
        </div>

        <div class='main'>
            <div class='left-navbar'>
                Left Sidebar
            </div>

            <div class='right-sidebar'>
                Right Sidebar
            </div>
            
            <div class='content'>

                <div class="content-area">
                    Content Area
                </div>

                <footer class='footer'>
                    Footer
                </footer>

            </div>
            
        </div>
    </div>
</body>

</html>

我该如何解决这个 html CSS 定位问题

How can I solve this html CSS positioning issue

html

css

css-position