Как установить раздел нижнего колонтитула, чтобы он оставался внизу, если нет лишнего контента, и нам нужно прокрутить, чтобы увидеть его, используя flex - PullRequest
Новая
       5

Как установить раздел нижнего колонтитула, чтобы он оставался внизу, если нет лишнего контента, и нам нужно прокрутить, чтобы увидеть его, используя flex

0 голосов
/ 11 июля 2020

Я пытаюсь следовать руководству о том, как иметь нижний колонтитул, который отображается внизу страницы, если недостаточно содержимого для заполнения страницы, ИЛИ он останется внизу содержимого, если содержимое превышает область просмотра .

Эта страница как пара альтернатив: https://css-tricks.com/couple-takes-sticky-footer/

Я пытаюсь следовать гибкому (я думал, что он самый современный / простой, исправьте меня, если я ошибаюсь).

Я думаю, единственное отличие моего веб-приложения в том, что я также использую панель навигации от response- bootstrap, которая может мешать моему результату.

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

что мне не хватает, чтобы это исправить? Я открыт для других подходов

Мой основной код: 

<div className="App"> 
  <div id="home">
    <img src="images/logo.png" alt="logo" className="Logo"/>
  </div>
  <NavigationBar onSearchChange={OnSearchChange} />
      
  <div className='Content'>
    <button onClick={AddCard}>Add Content</button>
    <ECardList {...{ecards: ecards, filters:filters}} />
  </div>

  <div className='Footer'>
    © Copyright 2010-{(new Date().getFullYear())}
  </div>
</div>

, а мой css это: 

.App {
  background-color: #000000;
  background-image: url('../images/background.png');
  background-repeat: repeat;
  display: flex;
  flex-direction: column;
  height: 100%;
}

#Home {
  flex: 1 0 auto;
}

.Logo {
  height: 15vmin;
  pointer-events: none;
}

.Content {
  padding: 10px 0px 10px 0px;
  flex: 1 0 auto;
}

.Footer {
  background-color: rgba(0, 0, 0, 0.6);
  padding-top: 1px;
  text-align: center;
  color: rgba(119, 119, 119, 1);
  height:21px;
  width:100%;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  flex-shrink: 0;
}

img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}

.dropdown-menu {
  max-height: 300px;
  overflow-y: scroll;
}

.navbar {
  box-shadow: inset 0px -2px 10px 0px rgba(0, 0, 0, 0.2),
              inset 0px 2px 10px 0px rgba(0,0,0,0.2);
}

, а моя панель навигации просто один из примеров, оставшихся вверху от response- bootstrap, но я думаю, что это тот, который вызывает мою проблему, это полный код: 

import React from 'react'
import {Navbar, Nav, Form, FormControl } from 'react-bootstrap'
import { INavigationBarProps } from '../../types/INavigationBarProps'

const NavigationBar = (props: INavigationBarProps) => {
  return <Navbar bg="light" expand="lg" sticky="top">
  <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
  <Navbar.Toggle aria-controls="basic-navbar-nav" />
  <Navbar.Collapse id="basic-navbar-nav">
    <Nav className="mr-auto">
      <Nav.Link href="#home">Home</Nav.Link>   
    </Nav>
    <Form inline>
      <FormControl type="text" placeholder="Search..." className="mr-sm-2" onChange={props.onSearchChange}/>
    </Form>
  </Navbar.Collapse>
</Navbar>
}

export default NavigationBar

Ответы [ 2 ]

1 голос
/ 12 июля 2020

Вы ищете так называемый липкий нижний колонтитул . В наши дни есть множество способов добиться этого. Вот как это сделать с помощью метода сетки CSS: 

html {
  height: 100%;
  padding: 0;
  margin: 0;
}
body {
  padding: 0;
  margin: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
<body>
  <header>
    My header
  </header>
  <main>
    <p>Hello world.</p>
  </main>
  <footer>
    Footer is on bottom!
  </footer>
</body>
1 голос
/ 12 июля 2020

Добавьте в свой класс приложения следующее: 

.App{
   min-height: 100vh;
}

Вам нужно минимальное значение высоты перед height: 100%, которое вы используете.

100vh относится к 100 % от фактической высоты области просмотра.

...