Вопросы Теги

Загрузочный фиксированный верхний и нижний колонтитулы с прокруткой области содержимого тела в контейнере для жидкости

Аналогичное решение для @gcedo , но без необходимости добавления промежуточного содержимого, чтобы подтолкнуть нижний колонтитул. Мы можем просто добавить margin-top:auto в нижний колонтитул, и он будет сдвинут в нижнюю часть страницы независимо от его высоты или высоты содержимого выше. 

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin:0;
}

.content {
  padding: 50px;
  background: red;
}

.footer {
  margin-top: auto;
  padding:10px;
  background: green;
}

  some content here




  some content

17
задан Community 23 May 2017 в 12:34
поделиться

3 ответа

Добавьте следующий CSS, чтобы отключить прокрутку по умолчанию: 

body {
    overflow: hidden;
}

И измените CSS #content на это, чтобы сделать прокрутку только в теле содержимого: 

#content {
    max-height: calc(100% - 120px);
    overflow-y: scroll;
    padding: 0px 10%;
    margin-top: 60px;
}

См. Скрипку здесь.

Редактировать:

На самом деле, я не уверен, с какой проблемой вы столкнулись, так как кажется, что ваш CSS работает. Я только добавил HTML и заголовок css: 

html {
  height: 100%;
}
html body {
  height: 100%;
  overflow: hidden;
}
html body .container-fluid.body-content {
  position: absolute;
  top: 50px;
  bottom: 30px;
  right: 0;
  left: 0;
  overflow-y: auto;
}
header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background-color: #4C4;
    height: 50px;
}
footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #4C4;
    height: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<header></header>
<div class="container-fluid body-content">
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
</div>
<footer></footer>
23
ответ дан falsarella 23 May 2017 в 12:34
поделиться

Пока я не получу лучший вариант, это самый «загрузочный» ответ, который я могу выработать:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/ 6cbrjrt5 /

Я перешел на использование LESS и включение пакета NuGet Bootstrap Source для обеспечения совместимости (предоставив мне доступ к файлу начальной загрузки variables.less:

в _layout.cshtml master page

  • Переместите нижний колонтитул за пределы контейнера body-content
  • Используйте Boostrap navbar-fixed-bottom в нижнем колонтитуле
  • Удалите <hr/> перед нижним колонтитулом (как сейчас избыточно)

Соответствующая страница HTML: 

<div class="container-fluid body-content">
    @RenderBody()
</div>
<footer class="navbar-fixed-bottom">
    <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
</footer>

В Site.less

  • Установите значения HTML и BODY на 100%
  • Установите BODY overflow на hidden
  • Установите body-content div position на absolute
  • Установите для body-content div top значение @navbar-height вместо значения жесткого подключения
  • Установите для body-content div bottom значение 30px.
  • ] Установите body-content div left и right в 0
  • . Установите body-content div [1124. ] до auto

Site.less 

html {
    height: 100%;

    body {
        height: 100%;
        overflow: hidden;

        .container-fluid.body-content {
            position: absolute;
            top: @navbar-height;
            bottom: 30px;
            right: 0;
            left: 0;
            overflow-y: auto;
        }
    }
}

Остается проблема, по-видимому, нет определяющей переменной для footer height в начальной загрузке. Если кто-то позвонит, скажите мне, есть ли волшебная переменная 30px, определенная в Bootstrap, я был бы признателен.

2
ответ дан Gone Coding 23 May 2017 в 12:34
поделиться

Другим вариантом будет использование flexbox .

Хотя это не поддерживается IE8 и IE9, вы могли бы рассмотреть:

  • Не обращая внимания на эти старые версии IE
  • Предоставление запасного варианта
  • Использование polyfill

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

html {
  height: 100%;
}
html body {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
html body .container-fluid.body-content {
  width: 100%;
  overflow-y: auto;
}
header {
    background-color: #4C4;
    min-height: 50px;
    width: 100%;
}
footer {
    background-color: #4C4;
    min-height: 30px;
    width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<header></header>
<div class="container-fluid body-content">
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
</div>
<footer></footer>
7
ответ дан Community 23 May 2017 в 12:34
поделиться