0

Как расстянуть блок ".body-block" на всю оставшиеся высоту родительского блока, что-бы блок ".footer" прижался к низу родительского блока?

.main-block {
    width: 600px;
    height: 400px;
    border 1px solid black !important;
}

.block-header {
    text-align: center;
    border-bottom: 1px solid black;
    padding: 15px 10px 10px 10px;
}

.nav-block {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 5px;
    border-bottom: 1px solid black;
}

.nav-block > * {
    text-decoration: none;
    color: black;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 16px;
    border-right: 1px solid black;
}

.nav-block *:last-child {
    border: none;
}

.body-block {
    display: flex;
    justify-content: space-between;
}
.left-section {
    display: flex;
    flex-direction: column;
    border-right: 1px solid black;
    padding: 20px;
}
.body-block > * {
    color: black;
}
.content-block {
    padding: 30px;
    flex-grow: 1 !important;
}
.right-section {
    display: flex;
    flex-direction: column;
    border-left: 1px solid black;
    padding: 20px;
}
.footer {
    text-align: center;
    padding: 10px;
    border: 1px solid black;
}
    <div class="d-flex w-100 justify-content-center mt-5">
        <div class="main-block bg-light">
            <div class="block-header">
                <h2 class="text-dark">Шапка сайта</h2>
            </div>
            <div class="nav-block">
                <a href="">Меню</a>
                <a href="">Меню</a>
                <a href="">Меню</a>
                <a href="">Меню</a>
                <a href="">Меню</a>
            </div>
            <div class="body-block">
                <div class="left-section">
                    <a href="">Ссылка-1</a>
                    <a href="">Ссылка-2</a>
                    <a href="">Ссылка-3</a>
                    <a href="">Ссылка-4</a>
                    <a href="">Ссылка-5</a>
                    <a href="">Ссылка-6</a>
                </div>
                <div class="content-block">Содержание</div>
                <div class="right-section">
                    <a href="">Реклама</a>
                    <a href="">Реклама</a>
                    <a href="">Реклама</a>
                    <a href="">Реклама</a>
                    <a href="">Реклама</a>
                </div>
            </div>
            <div class="footer">
                <div class="footer-text text-dark">Футер</div>
            </div>
        </div>
    </div>

2 ответа 2

0

Как расстянуть блок ".body-block" на всю оставшиеся высоту родительского блока, что-бы блок ".footer" прижался к низу родительского блока?

Предложу вариант с "флекс" блоками...

.main-block {
  /* делаем флексом */
  display: flex;
  flex-direction: column;
  /* ок */
  width: 600px;
  height: 400px;
  border: 1px solid black !important;
}

.block-header {
  text-align: center;
  border-bottom: 1px solid black;
  padding: 15px 10px 10px 10px;
}

.nav-block {
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 5px;
  border-bottom: 1px solid black;
}

.nav-block>* {
  text-decoration: none;
  color: black;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 16px;
  border-right: 1px solid black;
}

.nav-block *:last-child {
  border: none;
}

.body-block {
  /* тянем-потянем */
  flex-grow: 1;
  /* ок */
  display: flex;
  justify-content: space-between;
}

.left-section {
  display: flex;
  flex-direction: column;
  border-right: 1px solid black;
  padding: 20px;
}

.body-block>* {
  color: black;
}

.content-block {
  padding: 30px;
  flex-grow: 1 !important;
}

.right-section {
  display: flex;
  flex-direction: column;
  border-left: 1px solid black;
  padding: 20px;
}

.footer {
  text-align: center;
  padding: 10px;
  border: 1px solid black;
}
<div class="d-flex w-100 justify-content-center mt-5">
  <div class="main-block bg-light">
    <div class="block-header">
      <h2 class="text-dark">Шапка сайта</h2>
    </div>
    <div class="nav-block">
      <a href="">Меню</a>
      <a href="">Меню</a>
      <a href="">Меню</a>
      <a href="">Меню</a>
      <a href="">Меню</a>
    </div>
    <div class="body-block">
      <div class="left-section">
        <a href="">Ссылка-1</a>
        <a href="">Ссылка-2</a>
        <a href="">Ссылка-3</a>
        <a href="">Ссылка-4</a>
        <a href="">Ссылка-5</a>
        <a href="">Ссылка-6</a>
      </div>
      <div class="content-block">Содержание</div>
      <div class="right-section">
        <a href="">Реклама</a>
        <a href="">Реклама</a>
        <a href="">Реклама</a>
        <a href="">Реклама</a>
        <a href="">Реклама</a>
      </div>
    </div>
    <div class="footer">
      <div class="footer-text text-dark">Футер</div>
    </div>
  </div>
</div>

0

Требует добавление дополнительных обёрток top и bottom, также в .main-block добавил - display: flex;flex-direction: column;justify-content: space-between; и поправил ему height: 100vh;

.main-block {
    width: 600px;
    height: 100vh;
    border 1px solid black !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.block-header {
    text-align: center;
    border-bottom: 1px solid black;
    padding: 15px 10px 10px 10px;
}

.nav-block {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 5px;
    border-bottom: 1px solid black;
}

.nav-block > * {
    text-decoration: none;
    color: black;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 16px;
    border-right: 1px solid black;
}

.nav-block *:last-child {
    border: none;
}

.body-block {
    display: flex;
    justify-content: space-between;
}
.left-section {
    display: flex;
    flex-direction: column;
    border-right: 1px solid black;
    padding: 20px;
}
.body-block > * {
    color: black;
}
.content-block {
    padding: 30px;
    flex-grow: 1 !important;
}
.right-section {
    display: flex;
    flex-direction: column;
    border-left: 1px solid black;
    padding: 20px;
}
.footer {
    text-align: center;
    padding: 10px;
    border: 1px solid black;
}
<div class="d-flex w-100 justify-content-center mt-5">
        <div class="main-block bg-light">
            <div class="top">
              <div class="block-header">
                  <h2 class="text-dark">Шапка сайта</h2>
              </div>
              <div class="nav-block">
                  <a href="">Меню</a>
                  <a href="">Меню</a>
                  <a href="">Меню</a>
                  <a href="">Меню</a>
                  <a href="">Меню</a>
              </div>
              <div class="body-block">
                  <div class="left-section">
                      <a href="">Ссылка-1</a>
                      <a href="">Ссылка-2</a>
                      <a href="">Ссылка-3</a>
                      <a href="">Ссылка-4</a>
                      <a href="">Ссылка-5</a>
                      <a href="">Ссылка-6</a>
                  </div>
                  <div class="content-block">Содержание</div>
                  <div class="right-section">
                      <a href="">Реклама</a>
                      <a href="">Реклама</a>
                      <a href="">Реклама</a>
                      <a href="">Реклама</a>
                      <a href="">Реклама</a>
                  </div>
              </div>
            </div>
            <div class="bottom">
              <div class="footer">
                  <div class="footer-text text-dark">Футер</div>
              </div>
            </div>
        </div>
    </div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.