Friday

The title is not at the bottom of the header

Issue

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 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/boxicons@2.0.7/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 class="sidebar">
    <div class="logo-details">
      <span class="logo_name">
            <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 class="nav-links">
      <li>
        <a href="#">
          <span class="links_name" style="margin-left: 20px;">Administrateur</span>
          <i class="fa fa-chevron-down"></i>
        </a>
      </li>
    </ul>
  </div>

  <section class="home-section">
    <div class="heading">
      <div class="sidebar-button">
        <i class="bx bx-menu sidebarBtn"></i>
      </div>

      <div class="menu-summary-container">
        <span class="user">User: </span>
        <span class="last-connection">last connection: </span>
      </div>
    </div>

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

Thank you a lot for your help.

Solution

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

    <div class="heading text">
      <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/boxicons@2.0.7/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 class="sidebar">
    <div class="logo-details">
      <span class="logo_name">
            <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 class="nav-links">
      <li>
        <a href="#">
          <span class="links_name" style="margin-left: 20px;">Administrateur</span>
          <i class="fa fa-chevron-down"></i>
        </a>
      </li>
    </ul>
  </div>

  <section class="home-section">
    <div class="heading">
      <div class="sidebar-button">
        <i class="bx bx-menu sidebarBtn"></i>
      </div>

      <div class="menu-summary-container">
        <span class="user">User: </span>
        <span class="last-connection">last connection: </span>
      </div>
    </div>

    <div class="heading text">
      <h1>Portfolio page</h1>
    </div>
  </section>
</body>

Answered By - Peter Krebs

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Friday

The title is not at the bottom of the header

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels