Нижний колонтитул появляется в области содержимого - PullRequest
Новая
       31

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

0 голосов
/ 15 декабря 2018

Я использую компоненты компоновки Next.js и antd, чтобы получить страницу стиля панели мониторинга, используя их компонент Layout.У меня есть две проблемы со стилем (CSS):

  • Footer зажато в Content: я на самом деле работаю над производной примера с фиксированной стороной из и документы .Я попал Footer между компонентом Content.Я предполагаю, что это из-за стиля, но я не в состоянии понять это. Какой тип стилей мне следует искать?
  • Режим прокрутки: Боковая панель не может быть прокручена до конца, если развернута полностью.Вместо этого необходимо прокрутить полосу прокрутки окна браузера, чтобы полностью перемещаться по содержимому фиксированной боковой панели.Как отключить полосу прокрутки окна (она тоже выглядит ужасно с полосой прокрутки контента)? Если это невозможно, как сделать прокрутку боковой панели плавной и независимой от окна браузера?

Я воспроизвел ошибку здесь, в CodeSandbox .

enter image description here

Ответы [ 3 ]

0 голосов
/ 15 декабря 2018

Вам нужно переместить нижний колонтитул вниз между строками 119-120, и это должно позаботиться об этом.Это поместит нижний колонтитул в тот же контейнер, что и боковая панель.

0 голосов
/ 15 декабря 2018

Таким образом, эта проблема возникает из-за того, что несколько <Layout /> компонентов и их дочерних элементов взаимодействуют друг с другом, когда имеют разную высоту.Дочерние компоненты Layout и Content, кажется, всегда (не на 100% всегда) наследуют высоту от своего родителя Layout или, по крайней мере, всегда имеют меньшую высоту.

В настоящее время у вас естьНастройка макета выглядит так (псевдокод): 

<Layout>
  <Layout restrictedHeight >
    <Layout inheritedRestrictedHeight>
      <Content inheritedRestrictedHeight >
        <div unrestrictedHeight />
      </Content> //Content "height" ends here
      <Footer fixedPosition /> //Always begins where Content ends
      //Div "height" ends here
    </Layout>
  </Layout>
</Layout>

В связи с тем, как реализован нижний колонтитул, в DOM он размещается после Content, но, поскольку высота объектов DOM большого div не ограничена, он заканчивается нижеКонтейнер содержимого.Вот почему компонент Footer отображается в середине содержимого.

Причина заключается в следующей строке: 

<Layout hasSider={true} style={{ height: "100vh", marginTop: 64 }}>

Вы устанавливаете для свойства height значение 100vh, что означает 100% просмотра.высота, которая фактически равна текущему количеству пикселей, доступных на экране по оси Y.

Вместо 100% высоты просмотра вы хотите, чтобы ваш содержащий объект макета соответствовал полному размеру всего содержимого на странице.даже контент, который находится за пределами экрана.Для этого просто установите высоту 100%, а не 100vh: 

<Layout hasSider={true} style={{ height: "100%", marginTop: 64 }}>

Редактировать: Это также решает проблему с двойной полосой прокрутки.

ОБНОВЛЕНИЕ И ОТВЕТ НА НЕПРОКРУТНОЙ Боковой панели

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

Компонент рендерится в DOM как div с высотой содержимого, содержащегося в нем.Браузеру не важно, какая его часть находится за кадром, потому что вы фактически говорите браузеру, что он должен быть таким большим.

Чтобы прокрутить боковую панель, нужно ограничить высоту до размера этого пространства (справа под панелью навигации внизу экрана).Для этого вам нужно рассчитать 100vh минус размер навигационной панели в css / less для боковой панели: height: calc(~"100vh - 64px"); и убедиться, что переполнение-y установлено автоматически. 

.sidebar {
  // fixed sider
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(~"100vh - 64px");
  position: fixed;
  left: 0;
}

Вот обновленный codesandbox

В будущем старайтесь, чтобы ваши вопросы оставались только на одном основном вопросе, это приведет к лучшим ответам.

0 голосов
/ 15 декабря 2018

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

<Footer style={{ textAlign: "center" }}>
            Ant Design ©2018 Created by Ant UED
          </Footer>

После тега макета.

...