I would like the title to be at the bottom of the header, here is an example below

Except that, my problem is that the title is placed at the same height as the header and not at the bottom.

If I remove the header block, you can see the title.

I think it's a problem with my blocks? However, there is one solution, but I want to avoid doing a padding-top on the title to get this result:

I made a reproduction angular.

Here is a reproduction <meta charset="utf-8"> Titre de la page <link rel="stylesheet" href="style.css"> <link rel="icon" type="image/x-icon" href="favicon.ico" /> <link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" /> <script src="script.js"></script> <body>

Administrateur

Portfolio page

&css=@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700$**$display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; list-style: none; text-decoration: none; } .si$*$debar { position: fixed; height: 100%; wi$*$dth: 240px; background: #0a2558; transition: all 0.5s ease; } .si$*$debar.active { wi$*$dth: 60px; } .si$*$debar .logo-details { height: 100px; display: flex; align-items: center; background-color: #fff; } .si$*$debar .logo-details i { font-size: 28px; font-weight: 500; color: #fff; min-wi$*$dth: 60px; text-align: center; } .si$*$debar .logo-details .logo_name img { height: 100px; margin-left: 18px; } .si$*$debar .nav-links { margin-top: 10px; } .si$*$debar .nav-links li { position: relative; list-style: none; } .si$*$debar .nav-links li a { display: flex; justify-content: start; text-decoration: none; transition: all 0.4s ease; border-bottom: 1px soli$*$d #ccc; padding: 13px 0; } .si$*$debar .nav-links li a.active { background: #081d45; } .si$*$debar .nav-links li a:hover { background: #081d45; } .si$*$debar .nav-links li i { min-wi$*$dth: 60px; text-align: center; font-size: 18px; color: #fff; } .si$*$debar .nav-links .item { text-transform: uppercase; } .si$*$debar .nav-links li i.fa-chevron-down { right: 0; position: absolute; } .si$*$debar .nav-links li.active i.fa-chevron-down { transform: rotate(180deg); } .si$*$debar .nav-links li.active i { color: white; } .si$*$debar .nav-links li a .links_name { color: #fff; font-size: 15px; font-weight: 400; white-space: nowrap; } .home-section { position: relative; background: #f5f5f5; min-height: 100vh; wi$*$dth: calc(100% - 240px); left: 240px; transition: all 0.5s ease; } .home-section .heading { display: flex; justify-content: space-between; height: 100px; background: #fff; align-items: center; position: fixed; wi$*$dth: calc(100% - 240px); left: 240px; z-index: 100; padding: 0 20px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); transition: all 0.5s ease; } .home-section .heading .si$*$debar-button { display: flex; align-items: center; font-size: 24px; font-weight: 500; } .heading .si$*$debar-button i { font-size: 35px; margin-right: 10px; } .menu-summary-container { display: gri$*$d; margin: 0 auto; text-align: center; wi$*$dth: 100%; } .menu-summary-container .user, .menu-summary-container .last-connection { font-size: 22px; }&js=// JavaScript document.getElementById('welcome').innerText = " Editors"; " rel="nofollow noreferrer">html/css.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  list-style: none;
  text-decoration: none;
}

.sidebar {
  position: fixed;
  height: 100%;
  width: 240px;
  background: #0a2558;
  transition: all 0.5s ease;
}

.sidebar.active {
  width: 60px;
}

.sidebar .logo-details {
  height: 100px;
  display: flex;
  align-items: center;
  background-color: #fff;
}

.sidebar .logo-details i {
  font-size: 28px;
  font-weight: 500;
  color: #fff;
  min-width: 60px;
  text-align: center;
}

.sidebar .logo-details .logo_name img {
  height: 100px;
  margin-left: 18px;
}

.sidebar .nav-links {
  margin-top: 10px;
}

.sidebar .nav-links li {
  position: relative;
  list-style: none;
}

.sidebar .nav-links li a {
  display: flex;
  justify-content: start;
  text-decoration: none;
  transition: all 0.4s ease;
  border-bottom: 1px solid #ccc;
  padding: 13px 0;
}

.sidebar .nav-links li a.active {
  background: #081d45;
}

.sidebar .nav-links li a:hover {
  background: #081d45;
}

.sidebar .nav-links li i {
  min-width: 60px;
  text-align: center;
  font-size: 18px;
  color: #fff;
}

.sidebar .nav-links .item {
  text-transform: uppercase;
}

.sidebar .nav-links li i.fa-chevron-down {
  right: 0;
  position: absolute;
}

.sidebar .nav-links li.active i.fa-chevron-down {
  transform: rotate(180deg);
}

.sidebar .nav-links li.active i {
  color: white;
}

.sidebar .nav-links li a .links_name {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
}

.home-section {
  position: relative;
  background: #f5f5f5;
  min-height: 100vh;
  width: calc(100% - 240px);
  left: 240px;
  transition: all 0.5s ease;
}

.home-section .heading {
  display: flex;
  justify-content: space-between;
  height: 100px;
  background: #fff;
  align-items: center;
  position: fixed;
  width: calc(100% - 240px);
  left: 240px;
  z-index: 100;
  padding: 0 20px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  transition: all 0.5s ease;
}

.home-section .heading .sidebar-button {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 500;
}

.heading .sidebar-button i {
  font-size: 35px;
  margin-right: 10px;
}

.menu-summary-container {
  display: grid;
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

.menu-summary-container .user,
.menu-summary-container .last-connection {
  font-size: 22px;
}

<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
  <link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />

  <script src="script.js"></script>
</head>

<body>
  <div >
    <div >
      <span >
            <a href="https://zupimages.net/viewer.php?id=22/30/27uw.png"
              ><img src="https://zupimages.net/up/22/30/27uw.png" alt=""
            /></a>
          </span>
    </div>

    <ul >
      <li>
        <a href="#">
          <span  style="margin-left: 20px;">Administrateur</span>
          <i ></i>
        </a>
      </li>
    </ul>
  </div>

  <section >
    <div >
      <div >
        <i ></i>
      </div>

      <div >
        <span >User: </span>
        <span >last connection: </span>
      </div>
    </div>

    <h1>Portfolio page</h1>
  </section>
</body>

Thank you a lot for your help.

CodePudding user response：

If you must use a fixed position together with flexbox you can wrap the text in another div:

    <div >
      <h1>Portfolio page</h1>
    </div>

I then added some additional CSS:

    .home-section .heading.text {
      height: calc(100% - 100px);
      align-items: start;
      top: 100px;
      padding-top: 10px;
      background: #eee;
    }

If you can follow the advice from @isherwood and don't mix fixed position and flexbox at all.

Example layouts using flexbox can be searched on the internet.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  list-style: none;
  text-decoration: none;
}

.sidebar {
  position: fixed;
  height: 100%;
  width: 240px;
  background: #0a2558;
  transition: all 0.5s ease;
}

.sidebar.active {
  width: 60px;
}

.sidebar .logo-details {
  height: 100px;
  display: flex;
  align-items: center;
  background-color: #fff;
}

.sidebar .logo-details i {
  font-size: 28px;
  font-weight: 500;
  color: #fff;
  min-width: 60px;
  text-align: center;
}

.sidebar .logo-details .logo_name img {
  height: 100px;
  margin-left: 18px;
}

.sidebar .nav-links {
  margin-top: 10px;
}

.sidebar .nav-links li {
  position: relative;
  list-style: none;
}

.sidebar .nav-links li a {
  display: flex;
  justify-content: start;
  text-decoration: none;
  transition: all 0.4s ease;
  border-bottom: 1px solid #ccc;
  padding: 13px 0;
}

.sidebar .nav-links li a.active {
  background: #081d45;
}

.sidebar .nav-links li a:hover {
  background: #081d45;
}

.sidebar .nav-links li i {
  min-width: 60px;
  text-align: center;
  font-size: 18px;
  color: #fff;
}

.sidebar .nav-links .item {
  text-transform: uppercase;
}

.sidebar .nav-links li i.fa-chevron-down {
  right: 0;
  position: absolute;
}

.sidebar .nav-links li.active i.fa-chevron-down {
  transform: rotate(180deg);
}

.sidebar .nav-links li.active i {
  color: white;
}

.sidebar .nav-links li a .links_name {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
}

.home-section {
  position: relative;
  background: #f5f5f5;
  min-height: 100vh;
  width: calc(100% - 240px);
  left: 240px;
  transition: all 0.5s ease;
}

.home-section .heading {
  display: flex;
  justify-content: space-between;
  height: 100px;
  background: #fff;
  align-items: center;
  position: fixed;
  width: calc(100% - 240px);
  left: 240px;
  z-index: 100;
  padding: 0 20px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  transition: all 0.5s ease;
}

.home-section .heading.text {
  height: calc(100% - 100px);
  align-items: start;
  top: 100px;
  padding-top: 10px;
  background: #eee;
}

.home-section .heading .sidebar-button {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 500;
}

.heading .sidebar-button i {
  font-size: 35px;
  margin-right: 10px;
}

.menu-summary-container {
  display: grid;
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

.menu-summary-container .user,
.menu-summary-container .last-connection {
  font-size: 22px;
}

<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
  <link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />

  <script src="script.js"></script>
</head>

<body>
  <div >
    <div >
      <span >
            <a href="https://zupimages.net/viewer.php?id=22/30/27uw.png"
              ><img src="https://zupimages.net/up/22/30/27uw.png" alt=""
            /></a>
          </span>
    </div>

    <ul >
      <li>
        <a href="#">
          <span  style="margin-left: 20px;">Administrateur</span>
          <i ></i>
        </a>
      </li>
    </ul>
  </div>

  <section >
    <div >
      <div >
        <i ></i>
      </div>

      <div >
        <span >User: </span>
        <span >last connection: </span>
      </div>
    </div>

    <div >
      <h1>Portfolio page</h1>
    </div>
  </section>
</body>