Разделите html на три части с разной высотой

Я попытался разделить текст на три части разного размера: ЗАГОЛОВОК, КОНТЕЙНЕР и НИЖНИЙ ОБЗОР. Заголовок с 10% высоты, контейнер с 70% высоты и нижний колонтитул с 20%. Я пытался выполнить эту задачу с помощью flex, но не могу сделать это с процентами. Пожалуйста помоги.

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background-color: skyblue;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: space-between;
}

.header {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: black;
  color: rgb(225, 150, 0);
  font-weight: bold;
  font-style: italic;
  height: 10%;
  padding: 5px 10px;
  border: 1px solid blue;
}

.container {
  width: 100%;
  height: 70%;
  border: 1px solid red;
}

.footer {
  width: 100%;
  height: 20%;
  border: 1px solid green;
}

<div class = "header">
  <p>HEADER</p>
</div>
<div class = "container">
  <p>CONTAINER</p>
</div>
<div class = "footer">
  <p>FOOTER</p>
</div>

html css

19.04.2023 10:44

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Для этого используйте свойство CSS flex со значениями flex-base и flex-growth. См. фрагмент кода ниже

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background-color: skyblue;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: black;
  color: rgb(225, 150, 0);
  font-weight: bold;
  font-style: italic;
  padding: 5px 10px;
  border: 1px solid blue;
  flex: 0 0 10%;
}

.container {
  border: 1px solid red;
  flex: 1 0 70%;
}

.footer {
  border: 1px solid green;
  flex: 0 0 20%;
}

<div class = "header">
  <p>HEADER</p>
</div>
<div class = "container">
  <p>CONTAINER</p>
</div>
<div class = "footer">
  <p>FOOTER</p>
</div>

19.04.2023 10:52

Вы можете изменить свой код с помощью flex property, чтобы добиться желаемого результата.

Кроме того, я добавил flex-shrink: 0;, чтобы верхний и нижний колонтитулы не сжимались при уменьшении ширины области просмотра.

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background-color: skyblue;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: black;
  color: rgb(225, 150, 0);
  font-weight: bold;
  font-style: italic;
  padding: 5px 10px;
  border: 1px solid blue;
  flex: 0 0 10%;
  flex-shrink: 0;
}

.container {
  border: 1px solid red;
  flex: 1 0 70%;
}

.footer {
  border: 1px solid green;
  flex: 0 0 20%;
  flex-shrink: 0;
}

<div class = "header">
  <p>HEADER</p>
</div>
<div class = "container">
  <p>CONTAINER</p>
</div>
<div class = "footer">
  <p>FOOTER</p>
</div>

19.04.2023 11:13

Этого можно добиться двумя способами: с помощью сетки и гибкости; сначала с сеткой:

/* a simple reset, to remove default margin and padding, and using
   box-sizing to have all browsers use the same sizing algorithm,
   in order to have padding and border widths included within the
   declared sizing: */
*,::before,::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

section {
  /* taking 100 units of viewport-height on the block axis (the
     axis on which block elements are placed): */
  block-size: 100vh;
  /* using grid layout: */
  display: grid;
  /* setting a 0.5rem gap between adjacent grid-items: */
  gap: 0.5rem;
  /* defining the three rows: the first 10%, the third 20% and
     the second taking 1 fraction of all the remaining space: */
  grid-template-rows: 10% 1fr 20%;
}

section > * {
  /* irrelevant to demo, but is just to center the content of
     the grid-items: */
  display: grid;
  place-content: center;
}

/* irrelevant to the demo, just to colour the various elements: */
header {
  background-color: hsl(50deg 90% 70%);
}

main {
  background-color: hsl(100deg 90% 70%);
}

footer {
  background-color: hsl(150deg 90% 70%);
}

<section>
  <header>
    <p>Heading</p>
  </header>
  <main>
    <p>Main content</p>
  </main>
  <footer>
    <p>Footer</p>
  </footer>
</section>

Демонстрация JS Fiddle.

И, во-вторых, используя flex:

/* simple reset - as above - to remove default margins and
   padding, and to have box-sizing include the padding and
   borders in the declared sizes: */
*,::before,::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

section {
  /* sizing the <section> to take 100 viewport-height units: */
  block-size: 100vh;
  /* using flex layout: */
  display: flex;
  /* setting the main axis of the flex layout to columnnar: */
  flex-direction: column;
  /* setting a 0.5rem gap between adjacent flex-items: */
  gap: 0.5rem;
}

/* irrelevant to the demo, just centering the content of the
   flex-items: */
section > * {
  display: grid;
  place-content: center;
}

header {
  background-color: hsl(50deg 90% 70%);
  /* setting the flex-basis - that defines the base-size
     of the element - to 10% of its parent's size: */
  flex-basis: 10%;
}

main {
  background-color: hsl(100deg 90% 70%);
  /* specifying that the element should grow to take
     available space: */
  flex-grow: 1;
}

footer {
  background-color: hsl(150deg 90% 70%);
  /* setting the flex-basis to 20% of the parent's size: */
  flex-basis: 20%;
}

<section>
  <header>
    <p>Heading</p>
  </header>
  <main>
    <p>Main content</p>
  </main>
  <footer>
    <p>Footer</p>
  </footer>
</section>

Демонстрация JS Fiddle.

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

С учетом сказанного, я хотел бы предложить небольшой пересмотр вышеизложенного, воспользовавшись функцией clamp(); это позволяет нам установить «предпочтительный» размер, но с указанным минимумом и максимумом:

/* a simple reset, to remove default margin and padding, and using
   box-sizing to have all browsers use the same sizing algorithm,
   in order to have padding and border widths included within the
   declared sizing: */
*,::before,::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

section {
  /* taking 100 units of viewport-height on the block axis (the
     axis on which block elements are placed): */
  block-size: 100vh;
  /* using grid layout: */
  display: grid;
  /* setting a 0.5rem gap between adjacent grid-items: */
  gap: 0.5rem;
  /* defining the three rows,
       row 1: a minimum size of 4rem, a maximum size of 150px, with a
       preferred size of 10% (as specified in the question):,
       row 2: as before, set to take all available space once the
       elements with a specific defined size have been laid out,
       row 3: a mimum size of 8rem, a maximum of 250px, and a preferred
       size of 20%: */
  grid-template-rows: clamp(4rem, 10%, 150px) 1fr clamp(8rem, 20%, 250px);
}

section > * {
  /* irrelevant to demo, but is just to center the content of
     the grid-items: */
  display: grid;
  place-content: center;
}

/* irrelevant to the demo, just to colour the various elements: */
header {
  background-color: hsl(50deg 90% 70%);
}

main {
  background-color: hsl(100deg 90% 70%);
}

footer {
  background-color: hsl(150deg 90% 70%);
}

<section>
  <header>
    <p>Heading</p>
  </header>
  <main>
    <p>Main content</p>
  </main>
  <footer>
    <p>Footer</p>
  </footer>
</section>

Демонстрация JS Fiddle.

И, во-вторых, используя flex:

/* simple reset - as above - to remove default margins and
   padding, and to have box-sizing include the padding and
   borders in the declared sizes: */
*,::before,::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

section {
  /* sizing the <section> to take 100 viewport-height units: */
  block-size: 100vh;
  /* using flex layout: */
  display: flex;
  /* setting the main axis of the flex layout to columnnar: */
  flex-direction: column;
  /* setting a 0.5rem gap between adjacent flex-items: */
  gap: 0.5rem;
}

/* irrelevant to the demo, just centering the content of the
   flex-items: */
section > * {
  display: grid;
  place-content: center;
}

header {
  background-color: hsl(50deg 90% 70%);
  /* setting the flex-basis to a minimum of 4rem, a maximum of
     150px, with a preferred size of 10% within those constraints: */
  flex-basis: clamp(4rem, 10%, 150px);
}

main {
  background-color: hsl(100deg 90% 70%);
  /* specifying that the element should grow to take
     available space: */
  flex-grow: 1;
}

footer {
  background-color: hsl(150deg 90% 70%);
  /* setting the flex-basis to a minimum of 8rem, a maximum of
     250px, with a preferred size of 20% within those constraints: */
  flex-basis: clamp(8rem, 20%, 250px);
}

<section>
  <header>
    <p>Heading</p>
  </header>
  <main>
    <p>Main content</p>
  </main>
  <footer>
    <p>Footer</p>
  </footer>
</section>

Демонстрация JS Fiddle.

Использованная литература:

Спасибо всем за вашу преданность делу и быстрый ответ. Может ли кто-нибудь улучшить скрипты, которые будут блокировать размер HEADER и FOOTER на 100px, а остальное пространство оставить для CONTAINER. Мне нужно изменить размер только размера контейнера. заранее спасибо

— 19.04.2023 14:06

Все, что вам нужно сделать, это block-size: 100px; для соответствующих элементов.

— 19.04.2023 15:49

19.04.2023 11:13