Блог

Главная - Вопросы по программированию - Адаптивный дизайн нижнего колонтитула в Reactstrap

Адаптивный дизайн нижнего колонтитула в Reactstrap

#reactjs #twitter-bootstrap

#reactjs #twitter-bootstrap

Вопрос:

У меня возникли проблемы с адаптивным дизайном нижнего колонтитула с помощью reactstrap. Ниже приведен фрагмент кода для нижнего колонтитула.

 const Styles=styled.div`
    .navbar{
        background-color: black;
        width: 100%;
    }
`;
const Column = styled.div`
        display: flex;
        flex-direction: column;
        margin: 10px 30px auto 30px;
`;
const Line = styled.hr`
    border: solid 1px grey;
    width: 700px`;

const Footer = () =>{
    return(
            <Styles>
                <Navbar className="navbar-fixed-bottom">
                    <Container className="justify-content-center">
                        <Row> 
                           . 
                           .
                           .
                        </Row>
                        <Row><Line/></Row>
                    </Container>
                    <Container className="justify-content-center"><Row><HeadingList>© CEC CSE Department</HeadingList></Row></Container>
                </Navbar>
            </Styles>
    )
}

Приведенный выше код работает нормально, если содержимого достаточно для размещения на странице. Но если этого не происходит, возникает следующая проблема

введите описание изображения здесь

Как видно из рисунка, под нижним колонтитулом очень много пустого пространства. Как я могу решить эту проблему? Я пытался переопределить позицию CSS на sticky bottom значение 0, но это создает проблему, когда содержимого более чем достаточно, чтобы поместиться на странице.

Приветствуются некоторые другие адаптивные решения.

Комментарии:

1. Всякий раз, когда это происходит, я просто добавляю контейнер под содержимым с достаточной высотой, чтобы нижний колонтитул выходил за пределы области просмотра, в противном случае, если вы хотите, чтобы он был расположен внизу, несмотря ни на что, вы могли бы сделать position: absolute; bottom: 0; width: 100%;

2. Я пробовал это, но это портит всякий раз, когда появляется больше контента.

3. какой конечный результат вы ищете? если вы просто хотите разместить нижний колонтитул внизу независимо от основного содержимого, затем установите для него значение absolute и установите значение z-index 9999 или что-то в этом роде, чтобы все содержимое находилось под ним.