Я использую фреймворк дизайна Ant в своем проекте с помощью reactjs. Я пытаюсь создать макет, в котором нижний колонтитул должен оставаться в нижней части экрана, а верхний колонтитул фиксируется вверху, только контент должен изменять размер, он должен выглядеть так
--------------------------------
| HEADER |
--------------------------------
| | |
| | |
| LIST | CONTENT |
| | |
| | |
--------------------------------
| FOOTER |
--------------------------------
Ниже мой живой пример того, что я пытаюсь сделать.
https://codesandbox.io/embed/j4rkr509o3
Я не уверен, как заставить его работать, было бы очень любезно, если бы кто-нибудь мог мне помочь.
Ваше здоровье.
Вы можете попробовать добавить position: sticky
к своим <Header>
и <Footer>
и указать место (например, top, bottom
), в котором они должны быть.
Для достижения своей цели вы можете попробовать:
<Header style = {{ position: "sticky", top: "0" }}>
<Footer style = {{ position: "sticky", bottom: "0" }}>
Надеюсь, что это поможет, ура :)
@Yichaoz, если вам нужна поддержка IE, я могу придумать еще один способ - использовать position: fixed
. Однако, сделав это, вам придется немного украсить, чтобы получить желаемый вид.
Я не верю, что ant поддерживает это автоматически, но вы можете просто установить высоту div содержимого равной 100vh - (header.height + footer.height). Итак, в вашем примере что-то вроде этого:
<Content>
<div style = {{ background: "blue", height: "calc(100vh - 55px)" }}>
text
</div>
</Content>
Я пытался использовать calc
, но каким-то образом он вычитал 50vh
, чем 50px
.
Вы определяете высоту в строке или в вашем файле less? Если через less, возможно, проблема здесь stackoverflow.com/questions/27256849/…. Ответ прост.
Да, я использую .less
, я попробую решение, спасибо.
Пришлось сделать minHeight: ...
для поддержки страниц размером больше окна браузера.
Вы можете использовать Sider
для боковой панели и установить position: absolute
на основной макет со 100% высотой и шириной.
Здесь коды
Также не работал компонент макета, потому что вы не включили antd.css для codeandbox
Это решает проблему, но я хочу, чтобы содержимое прокручивалось на экране над нижним колонтитулом, а нижний колонтитул не выходил за пределы экрана, спасибо за указание на antd.css
. Мне было интересно, почему он не отображается.
это будет совершенно другое решение, поскольку нижний колонтитул не знает, есть ли у тела переполнение или нет. вам нужно будет создать макет вручную без использования компонента Layout и установить для контейнера содержимого значение <div style = {{minHeight: "calc (100vh - 70px)"}}>. где 70 пикселей - это высота нижнего колонтитула + заголовка. но calc () поддерживается только IE11 +
Спасибо, за ответ Я не беспокоюсь об IE прямо сейчас, я пытался использовать calc для определения высоты контента, но, похоже, с этим возникла проблема, так как в вашем случае он превращается в 30vh, поскольку он принимает 70px
как vh
, а не px
что меняет все. Можете ли вы добавить в него больше света?
Создайте свой собственный липкий нижний колонтитул 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>
position: sticky
не подходит, если вам нужна поддержка IE