html - 如何将“关于”部分放在页眉下方但位于页脚上方？-6ren

html - 如何将“关于”部分放在页眉下方但位于页脚上方？

转载作者：行者123 更新时间：2023-11-28 03:40:56

我希望关于部分位于 FIXED 页眉下方和页脚顶部？我正在努力解决这个问题，我试图在顶部添加填充，但我注意到它只是移动内容而不是整个 div。而且相对位置也不能解决问题，因为页脚不在关于部分下面解释对答案将有助于正确理解答案。

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
  line-height: 50px
}

header {
  background-color: #191919;
  position: fixed;
  width: 100%;
  color: #edf9ff;
  min-height: 70px;
  border-bottom: #0fe216 3px solid;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  margin-top:0;
}

header a {
  text-decoration: none;
  text-transform: uppercase;
  color: #edf9ff;
}
a:hover {
  color:blue;
}

header ul {
  margin: 0;
}

header li {
  list-style-type: none;
  float: left;
  padding-right: 20px;
}
#showtime {
  position:relative;
  top:100px;
  width:80%;
  margin: 0 auto;
  background-color: #f2f2f2;
}
#showtime img {
  width:300px;
  height:300px;
}
/*Image Repz*/
.showright {
  clear:both;
}

.highlight {
  font-size:125%;
  color:blue;
}
.showright img {
  float:right;
  clear:both;
}
.boxes:first-child {
  padding-top:50px;
}
.boxes:not(:first-child) {
  padding-top:100px;
  
}
.showright > p, .showright > h2 {
  text-align: center;
}
.showleft img {
  float:left;
  clear:both;
}
.showleft > p, .showleft > h2 {
  text-align: center;
}
footer {
margin-top:30px;
  background-color:#191919;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  clear:both;
}
footer p{
  text-align: center;
  color: white;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Photography | Home </title>
        <link href="About.css" rel="stylesheet"/>
        <script type="application/javascript" src="Home.js"></script>
    </head>
    <body>

        <header>
            <div id="branding">
                <h2>PHOTOGRAPHY</h2>
            </div>
            <nav id="links">
            <ul>
                <li><a href="Home.html">Home</a></li>
                <li><a href="About.html">About</a></li>
                <li><a href="#">PHOTO GALLERY</a></li>
                <li><a href="#">VIDEO GALLERY</a></li>
            </ul>
                </nav>
        </header>
        <section id="showtime">
                <div class="showleft boxes">
                    <h2>What are we about?</h2>
                    <p>In Mukhtar Photography, we specialise in creating a perfect video with the highest quality and we always tend to keep our promise. Whether it is an
                        Video or not we are <span class="highlight">MASTERS</span> at delivering the best photos
                    </p>
                </div>
                <div class="showleft boxes">
                    <h2>Why should you ask Mukhtar Photography for like: Marriages, videos?</h2>
                    <p>Because we put our dedication towards and is very unlikely to be any cancels to the project and if there is you will be paid 90% of the money you gave us.
                    </p>
            </div>
        </section>
              
        <footer>
            <p>Note that any copyright &copy; is reserved</p>
        </footer>
    </body>
</html>

最佳答案

要确保内容位于标题后面，您可以在 css 中使用“z-index”。要在内容 div 下方安排页脚，您必须使其位置“相对”。要获得内容和页脚之间的间距，您可以向内容 div 添加底部边距。

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
  line-height: 50px
}

header {
  background-color: #191919;
  position: fixed;
  z-index: 4;
  width: 100%;
  color: #edf9ff;
  min-height: 70px;
  border-bottom: #0fe216 3px solid;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  margin-top:0;
}

header a {
  text-decoration: none;
  text-transform: uppercase;
  color: #edf9ff;
}
a:hover {
  color:blue;
}

header ul {
  margin: 0;
}

header li {
  list-style-type: none;
  float: left;
  padding-right: 20px;
}
#showtime {
  position:relative;
  top:100px;
  width:80%;
  margin: 0 auto;
  margin-bottom: 50px;
  background-color: #f2f2f2;
}
#showtime img {
  width:300px;
  height:300px;
}
/*Image Repz*/
.showright {
  clear:both;
}

.highlight {
  font-size:125%;
  color:blue;
}
.showright img {
  float:right;
  clear:both;
}
.boxes:first-child {
  padding-top:50px;
}
.boxes:not(:first-child) {
  padding-top:100px;
  
}
.showright > p, .showright > h2 {
  text-align: center;
}
.showleft img {
  float:left;
  clear:both;
}
.showleft > p, .showleft > h2 {
  text-align: center;
}
footer {
  position: relative;
  margin-top:30px;
  background-color:#191919;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  clear:both;
}
footer p{
  text-align: center;
  color: white;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Photography | Home </title>
        <link href="About.css" rel="stylesheet"/>
        <script type="application/javascript" src="Home.js"></script>
    </head>
    <body>

        <header>
            <div id="branding">
                <h2>PHOTOGRAPHY</h2>
            </div>
            <nav id="links">
            <ul>
                <li><a href="Home.html">Home</a></li>
                <li><a href="About.html">About</a></li>
                <li><a href="#">PHOTO GALLERY</a></li>
                <li><a href="#">VIDEO GALLERY</a></li>
            </ul>
                </nav>
        </header>
        <section id="showtime">
                <div class="showleft boxes">
                    <h2>What are we about?</h2>
                    <p>In Mukhtar Photography, we specialise in creating a perfect video with the highest quality and we always tend to keep our promise. Whether it is an
                        Video or not we are <span class="highlight">MASTERS</span> at delivering the best photos
                    </p>
                </div>
                <div class="showleft boxes">
                    <h2>Why should you ask Mukhtar Photography for like: Marriages, videos?</h2>
                    <p>Because we put our dedication towards and is very unlikely to be any cancels to the project and if there is you will be paid 90% of the money you gave us.
                    </p>
            </div>
        </section>
              
        <footer>
            <p>Note that any copyright &copy; is reserved</p>
        </footer>
    </body>
</html>

关于html - 如何将“关于”部分放在页眉下方但位于页脚上方？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44215623/

文章推荐： c++ - 将视频从彩色转换为灰度

文章推荐： html - 动画文本转换大写

文章推荐： javascript - Vue js 中 IE 11 中的参数无效

文章推荐： c++ - 如何在postgresql中格式化数组参数？

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

html - 如何将“关于”部分放在页眉下方但位于页脚上方？