页脚不能位于侧边栏下方

Question

嗨，嗯，我如何将页脚放在侧导航下方，它适用于我的页眉，但我不知道如何为实际的页脚做。

也很抱歉，另一个问题，我如何才能让文字像小屏幕一样显示？因为侧边栏导航到页面底部，但文字不显示

Answer 1

您缺少一些匹配的标签，因此请始终对此感到厌倦，如果这是您所指的，您可以执行以下操作：

您可以创建一个新的导航项

元素：

   <li class="nav-item">
     
          Copyright © 2021 My Portfolio
          
     </li>

:root {
  font-size: 17px;
  font-family: 'Open Sans';
  --text-primary: black;
  --text-secondary: white;
  --bg-primary: white;
  --bg-secondary: #4F3466FF;
  --transition-speed: 600ms;
}

body {
  color: black;
  background-color: white;
  margin: 0;
  padding: 0;
}

body::-webkit-scrollbar {
  width: 0.25rem;
}

body::-webkit-scrollbar-track {
  background: black;
}

body::-webkit-scrollbar-thumb {
  background: #93385FFF;
}

main {
  margin-left: 5rem;
  padding: 1rem;
}


.navbar {
  position: fixed;
  background-color: #93385FFF;
  transition: width 600ms ease;
  overflow: scroll;
}

.navbar-nav {
  list-style: none;
  padding: 0;
  margin: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}


.nav-item {
  width: 100%;
}

.nav-item:last-child {
  margin-top: auto;
}

.nav-link {
  display: flex;
  align-items: center;
  height: 5rem;
  color: var(--text-primary);
  text-decoration: black;
  transition: var(--transition-speed);
}

.nav-link:hover {
  filter: grayscale(0%) opacity(1);
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.link-text {
  display: none;
  margin-left: 1rem;
}

.nav-link svg {
  width: 50rem;
  min-width: 2rem;
  margin: 0 1.5rem;
}


.navbar:hover .logo svg {
  transform: rotate(-180deg);
}

@media only screen and (max-width: 600px) {
  .navbar {
    bottom: 0;
    width: 100vw;
    height: 5rem;
  }

  .logo {
    display: none;
  }

  .navbar-nav {
    flex-direction: row;
  }

  .nav-link {
    justify-content: center;
  }

  main {
    margin: 100;
  }
}

/* Large screens */
@media only screen and (min-width: 600px) {
  .navbar {
    top: 0;
    width: 5rem;
    height: 100vh;
  }

  .navbar:hover {
    width: 20rem;
  }

  .navbar:hover .link-text {
    display: inline;
  }

  .navbar:hover .logo svg
  {
    margin-left: 20rem;
  }

  .navbar:hover .logo-text
  {
    left: 0px;
  }
}

.logo {
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 1rem;
  text-align: center;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  font-size: 1.5rem;
  letter-spacing: 0.3ch;
  width: 100%;
}

.logo svg {
  transform: rotate(0deg);
  transition: var(--transition-speed);
}

.logo-text
{
  display: inline;
  position: absolute;
  left: -999px;
  transition: var(--transition-speed);
}


::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.header {
  padding: 10px;
  text-align: center;
  background: #4F3466FF;
  color: white;
  font-size: 30px;
}

a {
  color: #9F6B99FF;
}
a:visited {
  color: #636;
}
a:hover, a:active, a:focus {
  color: black;
  
}

.footer {
  text-align: center;
  background-color: #4F3466FF;
  color: white;
  size: 15px
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script defer src="theme.js"></script>
  <link rel="stylesheet" href="style.css" />
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap" rel="stylesheet" />
</head>



<div class="header">
  <h3> Level 2 Website Development Page </h3>
  <img src=http://public.media.smithsonianmag.com/legacy_blog/smiley-face-1.jpg>
</div>

<body>
  <nav class="navbar">
    <ul class="navbar-nav">
      <li class="logo">
        <a href="#" class="nav-link">
          <span class="link-text logo-text">Digital Portfolio</span>
          <svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="angle-double-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x">
            <g class="fa-group">
              <path
                fill="currentColor"
                d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
                class="fa-secondary"
              ></path>
              <path
                fill="currentColor"
                d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
                class="fa-primary"
              ></path>
            </g>
          </svg>
        </a>
      </li>


      <li class="nav-item">
        <a href="home.html" class="active">
          <span class="link-text">Home</span>
        </a>
      </li>

      <li class="nav-item">
        <a href="about.html" class="nav-link">
          <span class="link-text">About Me & CV & Hobbies</span>
        </a>
      </li>

      <li class="nav-item">
        <a href="units.html" class="nav-link">
          <span class="link-text">Units</span>
        </a>
      </li>


      <li class="nav-item">
        <a href="unit1.html" class="nav-link">
          <span class="link-text">Unit 1: The Online World</span>
        </a>
      </li>


      <li class="nav-item">
        <a href="#" class="nav-link">
          <span class="link-text">Unit 2: Technology Systems</span>
        </a>
      </li>


      <li class="nav-item">
        <a href="#" class="nav-link">
          <span class="link-text">Unit 3 & 13: Website Development & Software Development</span>
        </a>
      </li>


      <li class="nav-item">
        <a href="#" class="nav-link">
          <span class="link-text">Unit 9: Spreadsheet Development</span>
        </a>
      </li>


      <li class="nav-item">
        <a href="#" class="nav-link">
          <span class="link-text">Unit 10: Database Development</span>
        </a>
      </li>


      <li class="nav-item">
        <a href="#" class="nav-link">
          <span class="link-text">Unit 12: Software Development</span>
        </a>
      </li>



      <li class="nav-item">
        <a href="#" class="nav-link">
          <span class="link-text">Contact Me</span>
        </a>
      </li>
     <li class="nav-item">
     
          Copyright © 2021 My Portfolio
          
     </li>
    </ul>
  </nav>

  <article>


    <main>

      <section>
        <article>

          <h1> Homepage </h1>

          <p> ......................... </p>

        </article>
      </section>

      <div class="footer">
      </div>

    </main>
    </article>
</body>

Answer 2

现在您的页脚包含在您的 main 标签中：

          <main>
      
            <section>
              <article>
      
                <h1> Homepage </h1>
      
                <p> ......................... </p>
      
              </article>
            </section>
      
            <div class="footer">
              <footer>
                <p>Copyright © 2021 My Portfolio</p>
            </div>
      
          </main>

您的 main 标记没有占据整个页面的宽度，这就是页脚小于页眉的原因。将页脚放在 main 标签之外可以解决您的问题

          <main>
      
            <section>
              <article>
      
                <h1> Homepage </h1>
      
                <p> ......................... </p>
      
              </article>
            </section>
          </main>

          <div class="footer">
            <footer>
              <p>Copyright © 2021 My Portfolio</p>
          </div>

Answer 3

我无法得到你所要求的。这是你期待的吗？

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  margin: 40px;
  background-color: #fff;
  color: #444;
}

h1, p {
  margin: 0 0 1em 0;
}

.wrapper {
  max-width: 940px;
  margin: 0 20px;
  display: grid;
  grid-gap: 10px;
}

@media screen and (min-width: 500px) {

  /* no grid support? */
  .sidebar {
    float: left;
    width: 19.1489%;
  }

  .content {
    float: right;
    width: 79.7872%;
  }

  .wrapper {
    margin: 0 auto;
    grid-template-columns: 1fr 3fr;
  }
  
  .header, .footer {
    grid-column: 1 / -1;
    /* needed for the floated layout */
    clear: both;
  }

}

.wrapper > * {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  /* needed for the floated layout*/
  margin-bottom: 10px;
}

/* We need to set the widths used on floated items back to auto, and remove the bottom margin as when we have grid we have gaps. */
@supports (display: grid) {
  .wrapper > * {
    width: auto;
    margin: 0;
  }
}

<div class="wrapper">
  <header class="header">My header</header>
  <aside class="sidebar">Sidebar</aside>
  <article class="content">
    <h1>2 column, header and footer</h1>
    <p>This example uses line-based positioning, to position the header and footer, stretching them across the grid.</p>
  </article>
  <footer class="footer">My footer</footer>
</div>

页脚不能位于侧边栏下方

footer cannot go underneath sidebar

html

css

flexbox

header

footer