页脚不能在侧边栏下方
Posted
技术标签:
【中文标题】页脚不能在侧边栏下方【英文标题】：footer cannot go underneath sidebar 【发布时间】：2021-08-25 20:12:29 【问题描述】：你好，我如何将页脚放在我的侧导航下方，它适用于我的页眉，但我不知道如何为实际页脚做。
也很抱歉，另一个问题，我如何使它像一个更小的屏幕显示的措辞？因为侧边导航到了页面底部，但是没有显示文字
【问题讨论】：
【参考方案1】：现在您的页脚包含在您的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>
【讨论】：
【参考方案2】：您缺少一些匹配的标签，所以请始终对此感到厌倦，如果这是您所指的，您可以执行以下操作：
你可以创建一个新的导航项
元素： <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>【讨论】：
谢谢你的帮助，比鲁斯！ @JazmineCz 如果这有助于您不要忘记投票/接受答案:)【参考方案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>【讨论】：
是的，虽然有人已经解释过了，但感谢您的帮助，非常感谢^_^以上是关于页脚不能在侧边栏下方的主要内容，如果未能解决你的问题，请参考以下文章
解析文档时是不是可以检测 HTML 元素的位置（页脚、侧边栏）？
如何使用 codeigniter 制作基本布局（页眉、页脚、侧边栏）