Расчитать ширину футера в зависимости от страницы

Question

Расчитать ширину футера в зависимости от страницы

Рейтинг: 1Ответов: 1Опубликовано: 11.05.2023

приложение веб блазор.

на первой страице у меня только регистрация футер, на всю нижнюю часть страницы все ок
когда перехожу на следующие страницы, появляется меню сбоку и собственно сама страница. и получается, что эта панель бокового меню слева накладываетеся на футер/или футер накладывается на это меню и выходит как то некрасиво.

это картинка левого края, я бордер добавила и видно, что футер накладывается на левое боковое меню

код

/* #region footer*/

.imageLogo {
  width: 45px;
}

footer {
  font-family: "Lucida Sans Unicode", "Lucida Grande";
  position: fixed;
  background: #E4E3E1;
  width: 100%;
  bottom: 0;
  left: 0;
}

footer::before {
  content: '';
  position: absolute;
  left: 0;
  top: 60px;
  height: 1px;
  width: 100%;
  background: #8A2336;
}

footer .contentFooter {
  max-width: 1250px;
  margin: auto;
  padding-top: 2px;
}

footer .contentFooter .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.contentFooter .top .logo-details {
  color: #8A2336;
  font-size: 30px;
}

.contentFooter .top .media-icons {
  display: flex;
}

.contentFooter .top .media-icons a {
  height: 30px;
  width: 30px;
  margin: 0 8px;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  color: #fff;
  font-size: 17px;
  text-decoration: none;
  transition: all 0.4s ease;
}

.top .media-icons a:nth-child(1) {
  background: #4267B2;
}

.top .media-icons a:nth-child(1):hover {
  color: #4267B2;
  background: #fff;
}

.top .media-icons a:nth-child(2) {
  background: #1DA1F2;
}

.top .media-icons a:nth-child(2):hover {
  color: #1DA1F2;
  background: #fff;
}

.top .media-icons a:nth-child(3) {
  background: #E1306C;
}

.top .media-icons a:nth-child(3):hover {
  color: #E1306C;
  background: #fff;
}

.top .media-icons a:nth-child(4) {
  background: #0077B5;
}

.top .media-icons a:nth-child(4):hover {
  color: #0077B5;
  background: #fff;
}

.top .media-icons a:nth-child(5) {
  background: #FF0000;
}

.top .media-icons a:nth-child(5):hover {
  color: #FF0000;
  background: #fff;
}

footer .bottom-details {
  width: 100%;
  background: #c7b6b5;
}

footer .bottom-details .bottom_text {
  max-width: 1250px;
  margin: auto;
  padding: 5px;
  display: flex;
  justify-content: space-between;
}

.bottom-details .bottom_text span,
.bottom-details .bottom_text a {
  font-size: 11px;
  font-weight: 300;
  color: #fff;
  opacity: 0.8;
  text-decoration: none;
}

.bottom-details .bottom_text a:hover {
  opacity: 1;
  text-decoration: underline;
}

.bottom-details .bottom_text a {
  margin-right: 10px;
}

@media (max-width: 700px) {
  footer {
    position: relative;
  }
  .contentFooter .top .logo-details {
    font-size: 26px;
  }
  .contentFooter .top .media-icons a {
    height: 25px;
    width: 25px;
    font-size: 14px;
    line-height: 25px;
  }
  .bottom-details .bottom_text span,
  .bottom-details .bottom_text a {
    font-size: 12px;
  }
}

@media (max-width: 520px) {
  footer::before {
    top: 145px;
  }
  footer .contentFooter .top {
    flex-direction: column;
  }
  .contentFooter .top .media-icons {
    margin-top: 16px;
  }
}


/* #endregion footer*/

<div class="page">
  @if (some test) {
  <div class="sidebar">
    <NavMenu />
  </div>
  }
  <main>
    <div class="top-row px-4">
      <button someBtn></button>
      <button someBtn></button>
    </div>
    <article class="content px-4">
      @Body
    </article>
  </main>
</div>

<footer>
  <div class="contentFooter">
    <div class="top">
      <div class="logo-details">
        <!--<i class="fa-solid fa-cactus"></i>-->
        <a href="#" target="_blank"><img class="imageLogo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png" alt="Logo" title="SomeTitle" rel="nofollow noopener noreferrer"></a>
      </div>
      <div class="media-icons">
        <a href="#" target="_blank" title="page facebook" rel="nofollow noopener noreferrer"><i class="fab fa-facebook-f"></i></a>
        <a><i class="fab fa-twitter"></i></a>
        <a><i class="fab fa-instagram"></i></a>
        <a href="#" target="_blank" title="page linkedin" rel="nofollow noopener noreferrer"><i class="fab fa-linkedin-in"></i></a>
        <a><i class="fab fa-youtube"></i></a>
      </div>
    </div>
  </div>
  <div class="bottom-details">
    <div class="bottom_text">
      <span class="copyright_text">
                        Copyright © 2023
                        <a href="#" target="_blank" title="SomeTitle" rel="nofollow noopener noreferrer">SomeCompany</a>All rights reserved
                    </span>
      <span class="policy_terms">
                        <a href="#">Privacy policy</a>
                        <a href="#">Terms & condition</a>
                    </span>
    </div>
  </div>
</footer>

menu это боковое имеет высоту 100vh, я попробовала 100%, оно стало во всей своей высоте, маленькое то есть

.sidebar {
    height: 100vh;
    position: sticky;
    top: 0;
}

какие стили нужно проверить, какую ширину подправить/или высоту этого меню, нужно ли проверку типа, если такая то страница так, или иначе... ?

css blazor-client-side

Источник: Stack Overflow на русском

Answer 1

▲ 2Принят

Если прям стандарт, то выглядит так

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.header {
  width: 100%;
  height: 15vh;
  background: red;
}

.main {
  width: 100%;
  min-height: 75vh;
  background: wheat;
  display: flex;
  flex-direction: row;
}

.slidebar {
  width: 100px;
  min-height: 100%;
  background: yellow;
}

.mid {
  width: 100%;
  min-height: 100%;
  background: green;
}
.footer {
  width: 100%;
  height: 10vh;
  background: blue;

}

<body>
 <div class="header">header</div>
 <div class="main">
  <div class="slidebar">slidebar</div>
  <div class="mid">mid</div>
 </div>
 <div class="footer">footer</div>
</body>

где мы выставляем неизменные значения хедеру и футеру. Все остальное, что мы хотим видеть на странице мы помещаем в мэин, он будет тянутся, а хедер и футер будут неизменчиво стоять на своих местах. В мэин уже с помощью флексов или гридов(кому как нравится) выравниваем свои блоки и радуемся

Расчитать ширину футера в зависимости от страницы

Ответы