css - HTML - Main-area only between Header and Footer

My Header is partly transparent (because of a background image in the body-Tag), by scrolling down the content of the main-tag you can still read the text through the header.

I want the main-tag content to be only between header and footer. Also by scrolling it should hide behind the header or footer. Is there a solution using css only and without any JavaScript or similar?

body {
  font-family: Arial, sans-serif;
  font-size: 20px;
  background-image: url("");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  margin: 0 auto;
  flex-grow: 1;
  /*Try but didn't worked out*/
  max-width: 1200px;
  width: 100%;
  background-color: #bbbbbbbb;
  padding-top: 10px;
  padding-bottom: 50px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  margin-bottom: 50px;
  margin-top: 200px;
  overflow: hidden;
  /*Try but didn't worked out*/
}

.main-container {
  display: block;
  height: auto;
  overflow: clip;
  /*Next try*/
  overflow-clip-margin: 0;
  /*Next try*/
  margin: 0;
  padding: 0;
}

.header {
  text-align: center;
  background-color: #555;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  opacity: 0.9;
  height: 150px;
  width: 100vw;
}

.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 350px;
  height: 100px;
}

.logo {
  max-width: 350px;
  height: auto;
  opacity: 1;
  max-height: 100px;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  display: flex;
  justify-content: center;
}

.menu li {
  margin: 0 15px;
}

.menu a {
  text-decoration: none;
  color: white;
  padding: 10px 15px;
}

.menu a:hover {
  background-color: #575757bb;
  border-radius: 5px;
}

.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #333;
  opacity: 0.9;
  height: 50px;
  width: 100vw;
  position: fixed;
  top: 150px;
  z-index: 100;
}

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page</title>
  <link rel="stylesheet" href="CSS/style.css">
</head>

<body>
  <header class="header">
    <div class="logo-container">
      <img src="" alt="Logo" class="logo">
    </div>
    <nav class="navbar">
      <ul class="menu">
        <li>
          <a href="/Folder/">home</a>
        </li>
        <li>
          <a href="/Folder/#page1">Page1</a>
        </li>
        <li>
          <a href="/Folder/#page2">Page2</a>
        </li>
        <li>
          <a href="/Folder/#page3">Page3</a>
        </li>
      </ul>
    </nav>
  </header>
  <div class="main-container">
    <main>
      <h1 id="page1">Welcome</h1>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </main>
  </div>
</body>

</html>

My Header is partly transparent (because of a background image in the body-Tag), by scrolling down the content of the main-tag you can still read the text through the header.

body {
  font-family: Arial, sans-serif;
  font-size: 20px;
  background-image: url("https://placehold.co/2000x2000/AA0000/FFFFAA/png");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  margin: 0 auto;
  flex-grow: 1;
  /*Try but didn't worked out*/
  max-width: 1200px;
  width: 100%;
  background-color: #bbbbbbbb;
  padding-top: 10px;
  padding-bottom: 50px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  margin-bottom: 50px;
  margin-top: 200px;
  overflow: hidden;
  /*Try but didn't worked out*/
}

.main-container {
  display: block;
  height: auto;
  overflow: clip;
  /*Next try*/
  overflow-clip-margin: 0;
  /*Next try*/
  margin: 0;
  padding: 0;
}

.header {
  text-align: center;
  background-color: #555;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  opacity: 0.9;
  height: 150px;
  width: 100vw;
}

.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 350px;
  height: 100px;
}

.logo {
  max-width: 350px;
  height: auto;
  opacity: 1;
  max-height: 100px;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  display: flex;
  justify-content: center;
}

.menu li {
  margin: 0 15px;
}

.menu a {
  text-decoration: none;
  color: white;
  padding: 10px 15px;
}

.menu a:hover {
  background-color: #575757bb;
  border-radius: 5px;
}

.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #333;
  opacity: 0.9;
  height: 50px;
  width: 100vw;
  position: fixed;
  top: 150px;
  z-index: 100;
}

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page</title>
  <link rel="stylesheet" href="CSS/style.css">
</head>

<body>
  <header class="header">
    <div class="logo-container">
      <img src="https://placehold.co/600x400/000000/FFFFFF/png?text=logo" alt="Logo" class="logo">
    </div>
    <nav class="navbar">
      <ul class="menu">
        <li>
          <a href="/Folder/">home</a>
        </li>
        <li>
          <a href="/Folder/#page1">Page1</a>
        </li>
        <li>
          <a href="/Folder/#page2">Page2</a>
        </li>
        <li>
          <a href="/Folder/#page3">Page3</a>
        </li>
      </ul>
    </nav>
  </header>
  <div class="main-container">
    <main>
      <h1 id="page1">Welcome</h1>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </main>
  </div>
</body>

</html>

Share Improve this question edited Mar 17 at 14:52 j08691 208k32 gold badges269 silver badges280 bronze badges asked Mar 17 at 13:08 user29981651 11 bronze badge

You should use JavaScript to achieve the wanted behavior. – AlCo2 Commented Mar 17 at 13:20
I think you might be able to achieve what you are looking for by putting the header and footer in their own div, and then elevating those to a higher z-index. If you want to make sure that the main div is not seen through the header of footer, place a solid background behind those elements, but at a lower z-index. Stacking these elements might help. – Apolymoxic Commented Mar 17 at 14:24

Add a comment |

2 Answers 2

Sorted by: Reset to default 0

Use 100vh height for body and display: flex; flex-direction: column; so that the content adjusts itself between the header and footer.

Also setflex-grow: 1; overflow-y: auto; on the .main-container so that scrolling is contained within the main container. Ensure main has the proper height and margin. Please explain properly if still persist.

body {
  font-family: Arial, sans-serif;
  font-size: 20px;
  background-image: url("https://placehold.co/2000x2000/AA0000/FFFFAA/png");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh; /* Ensure full viewport height */
}

main {
  margin: 0 auto;
  flex-grow: 1;
  /*Try but didn't worked out*/
  max-width: 1200px;
  width: 100%;
  background-color: #bbbbbbbb;
  padding: 10px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  margin: 0 auto;
  
}

.main-container {
  display: block;
  height: auto;
  overflow: clip;
  /*Next try*/
  overflow-clip-margin: 0;
  /*Next try*/
  margin: 0;
  padding: 0;
flex-grow: 1;
  overflow-y: auto; /* Allow scrolling inside this div */
  margin-top: 200px; /* Prevent overlap with the fixed header */
  margin-bottom: 50px; /* Prevent overlap with the footer */
}

.header {
  text-align: center;
  background-color: #555;
  position: fixed;
  top: 0;
  opacity: 0.9;
  height: 150px;
  width: 100%;
  z-index: 1000;
}

.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 350px;
  height: 100px;
}

.logo {
  max-width: 350px;
  height: auto;
  opacity: 1;
  max-height: 100px;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  display: flex;
  justify-content: center;
}

.menu li {
  margin: 0 15px;
}

.menu a {
  text-decoration: none;
  color: white;
  padding: 10px 15px;
}

.menu a:hover {
  background-color: #575757bb;
  border-radius: 5px;
}

.navbar {
   background-color: #333;
  opacity: 0.9;
  height: 50px;
  width: 100%;
  position: fixed;
  top: 150px;
  z-index: 100;
}

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page</title>
  <link rel="stylesheet" href="CSS/style.css">
</head>

<body>
  <header class="header">
    <div class="logo-container">
      <img src="https://placehold.co/600x400/000000/FFFFFF/png?text=logo" alt="Logo" class="logo">
    </div>
    <nav class="navbar">
      <ul class="menu">
        <li>
          <a href="/Folder/">home</a>
        </li>
        <li>
          <a href="/Folder/#page1">Page1</a>
        </li>
        <li>
          <a href="/Folder/#page2">Page2</a>
        </li>
        <li>
          <a href="/Folder/#page3">Page3</a>
        </li>
      </ul>
    </nav>
  </header>
  <div class="main-container">
    <main>
      <h1 id="page1">Welcome</h1>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </main>
  </div>
</body>

</html>

You could use a 100% height document, with a grid to manage your body layout, and set overflow: auto on main so that it scrolls.

html, body {
  height: 100%;
}

body {
  font-family: Arial, sans-serif;
  font-size: 20px;
  margin: 0;
  background-image: url(https://picsum.photos/id/670/1000);
  background-size: cover;
  background-position: center;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header, footer {
  color: white;
  background-color: #555;
  opacity: 0.9;
  display: flex;
  justify-content: center;
  align-items: center;
}

header {
  flex-direction: column;
}

nav {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #333;
  opacity: 0.9;
  height: 50px;
}

.logo {
  width: 150px;
  margin: 1em;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  display: flex;
  justify-content: center;
}

.menu li {
  margin: 0 15px;
}

.menu a {
  text-decoration: none;
  color: inherit;
  padding: 10px 15px;
}

.menu a:hover {
  background-color: #575757bb;
  border-radius: 5px;
}

main {
  margin: 1em auto;
  width: 90%;
  max-width: 1200px;
  background-color: #bbbbbbbb;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  overflow: auto;
  box-sizing: border-box;
  padding: 0 1em;
}

footer {
  padding: 0.5em;
}

<header>
  <img src="https://placehold.co/600x400/000000/FFFFFF/png?text=logo" alt="Logo" class="logo">
  <nav>
    <ul class="menu">
      <li>
        <a href="/Folder/">home</a>
      </li>
      <li>
        <a href="/Folder/#page1">Page1</a>
      </li>
      <li>
        <a href="/Folder/#page2">Page2</a>
      </li>
      <li>
        <a href="/Folder/#page3">Page3</a>
      </li>
    </ul>
  </nav>
</header>

<main>
  <h1 id="page1">Welcome</h1>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</main>

<footer>footer here</footer>

After running this snippet, click the full page link to see the results properly.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

css - HTML - Main-area only between Header and Footer - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)