ReactJS - дизайн муравьев - исправить нижний колонтитул с макетом

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

--------------------------------
|          HEADER              | 
--------------------------------
|       |                      |
|       |                      |
| LIST  |       CONTENT        |
|       |                      |
|       |                      |
--------------------------------
|          FOOTER              | 
--------------------------------

Ниже мой живой пример того, что я пытаюсь сделать.

https://codesandbox.io/embed/j4rkr509o3

Я не уверен, как заставить его работать, было бы очень любезно, если бы кто-нибудь мог мне помочь.

Ваше здоровье.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
10
0
11 905
6
Перейти к ответу Данный вопрос помечен как решенный

Ответы 6

Вы можете попробовать добавить position: sticky к своим <Header> и <Footer> и указать место (например, top, bottom), в котором они должны быть.

Для достижения своей цели вы можете попробовать:

<Header style = {{ position: "sticky", top: "0" }}>

<Footer style = {{ position: "sticky", bottom: "0" }}>

Надеюсь, что это поможет, ура :)

position: sticky не подходит, если вам нужна поддержка IE
Yichaoz 11.09.2018 21:12

@Yichaoz, если вам нужна поддержка IE, я могу придумать еще один способ - использовать position: fixed. Однако, сделав это, вам придется немного украсить, чтобы получить желаемый вид.

lyming90 11.09.2018 21:16
Ответ принят как подходящий

Я не верю, что ant поддерживает это автоматически, но вы можете просто установить высоту div содержимого равной 100vh - (header.height + footer.height). Итак, в вашем примере что-то вроде этого:

<Content>
   <div style = {{ background: "blue", height: "calc(100vh - 55px)" }}>
      text
   </div>
</Content>

Я пытался использовать calc, но каким-то образом он вычитал 50vh, чем 50px.

iphonic 12.09.2018 07:41

Вы определяете высоту в строке или в вашем файле less? Если через less, возможно, проблема здесь stackoverflow.com/questions/27256849/…. Ответ прост.

James 12.09.2018 15:45

Да, я использую .less, я попробую решение, спасибо.

iphonic 12.09.2018 19:22

Пришлось сделать minHeight: ... для поддержки страниц размером больше окна браузера.

Matthew D. Scholefield 11.01.2021 07:50

Вы можете использовать Sider для боковой панели и установить position: absolute на основной макет со 100% высотой и шириной.

Здесь коды

Также не работал компонент макета, потому что вы не включили antd.css для codeandbox

Это решает проблему, но я хочу, чтобы содержимое прокручивалось на экране над нижним колонтитулом, а нижний колонтитул не выходил за пределы экрана, спасибо за указание на antd.css. Мне было интересно, почему он не отображается.

iphonic 12.09.2018 07:40

это будет совершенно другое решение, поскольку нижний колонтитул не знает, есть ли у тела переполнение или нет. вам нужно будет создать макет вручную без использования компонента Layout и установить для контейнера содержимого значение <div style = {{minHeight: "calc (100vh - 70px)"}}>. где 70 пикселей - это высота нижнего колонтитула + заголовка. но calc () поддерживается только IE11 +

Yichaoz 12.09.2018 18:33

Спасибо, за ответ Я не беспокоюсь об IE прямо сейчас, я пытался использовать calc для определения высоты контента, но, похоже, с этим возникла проблема, так как в вашем случае он превращается в 30vh, поскольку он принимает 70px как vh, а не px что меняет все. Можете ли вы добавить в него больше света?

iphonic 12.09.2018 19:21

Создайте свой собственный липкий нижний колонтитул https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Затем заполните остальную часть вашего сайта компонентами AntD.

вы можете добавить {{position: 'sticky'}} и разместить нижний колонтитул вне содержимого

вот пример с липким нижним колонтитулом

Вы можете использовать style = {{ minHeight: "100vh" }} для компонента Layout. Работает для меня. Например так:

  <Layout style = {{ minHeight: "100vh" }}>
    <Header>Header</Header>
    <Content>Content</Content>
    <Footer>Footer</Footer>
  </Layout>

Другие вопросы по теме