如何避免HTML和CSS中的粘性页眉和页脚与内容重叠？

btxsgosb 于 2022-12-15 发布在其他

关注(0)|答案(3)|浏览(205)

我知道这可能是愚蠢的，但我面临着这个问题，当我试图遵循语义的方式。我需要有一个粘性页眉和页脚和主要内容是可滚动的。当我遵循一些啧啧，并试图建立自己的，我面临着这个问题，并无法摆脱它。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
}

header,
footer {
  position: fixed;
  width: 100%;
  min-height: 100%;
}

header {
  top: 0;
  bottom: auto;
}

footer {
  top: auto;
  bottom: 0;
}

main {
  position: relative;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Benazir Beauty</title>
  </head>
  <body>
    <header>Header</header>
    <main>
      Main
    </main>
    <footer>Footer</footer>
  </body>
</html>

css

来源：https://stackoverflow.com/questions/74803096/how-to-avoid-the-sticky-header-and-footer-overlapping-with-the-content-in-html-a

3条答案

按热度按时间

hujrc8aj1#

你可以使用flex，把页脚和页眉没有使用的所有空间都给予主块。

html,
body {
  height: 100vh;
  margin: 0;
}

.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

header,
footer {
  background-color: #ddddff;
}

main {
  flex: 1;
  overflow: auto;
  background: #ddffdd;
}
 
main p {
  /* force a scroll */
  height: 8rem;
}

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Benazir Beauty</title>
</head>

<body>
  <div class="page-container">
    <header>Header</header>
    <main>
      Main
      <div> Some large content to scroll through!
        <p>Happy days are here again</p>
        <p>Happy days are here again</p>
        <p>Happy days are here again</p>
        <p>Happy days are here again</p>
        <p>Happy days are here again</p>
        <p>Happy days are here again</p>
      </div>
    </main>
    <footer>Footer</footer>
  </div>
</body>

更大的页眉/页脚：更大一些
一个二个一个一个

赞(0）回复(0）举报 2022-12-15

a7qyws3x2#

拆下header, footer上的min-height: 100%;。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
}

header,
footer {
  position: fixed;
  width: 100%;
}

header {
  top: 0;
  bottom: auto;
}

footer {
  top: auto;
  bottom: 0;
}

main {
  position: relative;
  margin-top: 1rem;
}

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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Benazir Beauty</title>
</head>

<body>
  <header>Header</header>
  <main>
    Main
  </main>
  <footer>Footer</footer>
</body>

</html>

赞(0）回复(0）举报 2022-12-15

2guxujil3#

你可以从两个方面着手：

display: grid

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
}

body {
  height: 100vh;
  display: grid;
  grid-template: 200px auto 200px/auto;
}

header {
  background: red;
}

main {
  background: green;
  overflow-y: scroll;
}

footer {
  background: blue;
}

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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Benazir Beauty</title>
</head>

<body>
  <header>Header</header>
  <main>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat laoreet ipsum vitae semper. Vivamus eget nulla non velit congue malesuada. Nullam feugiat mi a scelerisque convallis. Phasellus viverra dui felis, ut laoreet dolor posuere eget.
    Praesent ac justo vitae est volutpat eleifend a nec velit. Maecenas ullamcorper, augue fermentum imperdiet malesuada, augue ex maximus tortor, sed malesuada sem ante in enim. Suspendisse potenti. Curabitur ut eros fringilla, tincidunt nunc in, fermentum
    turpis. Maecenas erat mi, lobortis vel rutrum at, pretium vel leo. Suspendisse sagittis gravida leo vel viverra. Vestibulum a malesuada arcu.
    <br> Proin eu congue magna. Integer id tincidunt ipsum, ac efficitur urna. Sed non facilisis metus, vitae vehicula leo. Nunc at vestibulum diam. Aenean egestas felis sed mi semper feugiat. Etiam diam velit, bibendum vel orci ut, sodales blandit dui.
    Maecenas in ultrices ipsum. Vivamus iaculis tincidunt est ut malesuada. Morbi bibendum tellus et risus accumsan, non condimentum turpis aliquam.
    <br> Praesent vulputate dictum hendrerit. Suspendisse urna risus, egestas id mollis pharetra, fringilla nec erat. In sem dui, volutpat vitae finibus eget, commodo luctus metus. Vestibulum sagittis turpis a lacus scelerisque, at elementum tellus finibus.
    Quisque non velit purus. Pellentesque eu lorem turpis. Duis ut massa odio. Proin interdum neque efficitur eleifend ornare. Etiam a placerat ipsum. Fusce vestibulum sit amet ex vel scelerisque. Sed eget efficitur lorem.
    <br> Ut condimentum, lorem placerat egestas dapibus, orci enim congue risus, a interdum odio nunc a eros. Donec lobortis libero quis diam molestie, non ultrices libero dictum. Donec tortor odio, ultricies vitae placerat id, viverra vulputate odio.
    Nullam mollis nisl vel turpis laoreet, et consectetur nisl vulputate. In rhoncus, massa non mollis lacinia, ipsum nibh hendrerit ante, vel fringilla urna tortor vitae est. Sed commodo nisi magna, vitae congue purus pellentesque ac. Praesent sed mollis
    dui. Quisque vel euismod arcu. Curabitur rutrum, justo non lobortis accumsan, mauris sem facilisis nulla, non condimentum diam odio at dolor. Aliquam erat volutpat. Donec ultrices sem viverra, laoreet neque eu, dignissim arcu. Etiam a interdum odio.
    In molestie, est eget ornare aliquet, quam mi egestas est, sit amet lacinia mauris augue eu ante. Nulla posuere placerat lorem.
    <br> Nullam sapien sapien, interdum a lorem ullamcorper, tempus tempor ipsum. Nam sollicitudin posuere dolor sit amet pretium. Aliquam cursus mollis ligula eget tempor. Pellentesque aliquet libero quis congue tincidunt. Suspendisse cursus molestie
    diam dapibus congue. Pellentesque et purus nec erat molestie bibendum. Ut et urna tempus, eleifend lacus eget, congue dui. Duis fermentum suscipit porta. Quisque sit amet dui euismod, scelerisque sem ut, aliquam nibh.
  </main>
  <footer>Footer</footer>
</body>

</html>

使用视图高度

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
}

body {
  height: 100vh;
}

header {
  background: red;
  height: 30vh;
}

main {
  background: green;
  overflow-y: scroll;
  height: 40vh;
}

footer {
  background: blue;
  height: 30vh;
}

赞(0）回复(0）举报 2022-12-15

我来回答

如何避免HTML和CSS中的粘性页眉和页脚与内容重叠？

3条答案

相关问题

热门标签

最新问答