页脚不能放在侧边栏下面

嗨，我该如何将页脚放在侧导航下面，它适用于我的页眉，但我不知道该如何处理实际的页脚。

也很抱歉，还有一个问题，我怎么才能让文字像小屏幕一样显示出来？因为侧导航转到页面底部，但单词没有显示

现在您的页脚包含在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>

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

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

元素：

<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>

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

*, *: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>

相关内容

最新更新

热门标签：