EDIT: Здається, Fiddle не завантажує Twitter Bootstrap правильно, тому я пропоную вам скопіювати мої HTML та CSS-код у пустий .html файл на своєму робочому столі та виправляти неполадки з цим файлом. Будь ласка, пам'ятайте, як правильно включити Twitter Bootstrap 3 (CDN міститься в моєму HTML-коді нижче), оскільки ця проблема з'являється тільки при включенні Bootstrap.
Ось моя скрипка / код: http://jsfiddle.net/maLog1sm/
І ось код, який знаходиться в скрипці:
HTML:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<div class="container-fluid headerRow">
<div class="row headerRow">
<div class="col-md-12 navContainer">
<ul class="nav nav-pills nav-stacked custom-nav-pills">
<li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> About</a></li>
<li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Contact</a></li>
<li><a href="#"> Portfolio</a></li>
</ul>
</div>
<div class="col-md-10 bodyColumn">
<div class="footer"><p>Footer</p></div>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
overflow: auto;
margin: 0;
padding: 0;
}
.bodyColumn {
height: 100%;
overflow: auto;
}
.headerRow {
height: 100%;
overflow: auto;
}
.footer {
position: absolute;
bottom: 0%;
}
Він використовує завантажувальний файл 3. Я дивлюся, чому є вертикальна смужка прокрутки, і я можу її видалити (на скрипці з'являється смужка прокрутки, незалежно від того, чи зменшується вікно браузера, але на моєму фактичному веб-сайті він з'являється лише тоді, коли вікно зменшено.) зменшилася, маю на увазі, коли ширина вікна браузера зменшується, ніж максимальна ширина).
Відповіді:
3 для відповіді № 1Проблема з вашим кодом - це те, що ви даєтевисота 100% до HTML та BODY, виправлення не виникає.Також ви надали однакову висоту: 100% до 2 класів (два div) всередині нього, тепер HTML не може дати 100% для обох внутрішніх div.Ви можете вказати висоту: автоматично до класу, який буде змінювати висоту відповідно до наявного вмісту.
Тут Спробуйте замінити висоту: 100% на висоту: авто; для класу. bodyColumn це вирішить вашу проблему
CSS : Оновлено
.bodyColumn {
position:absolute !important;
bottom:0%;
height: auto;
overflow: auto;
}
.headerRow {
height: 100%;
overflow: auto;
}
.footer {
display:block;
}
DEMO : Оновлено
Пояснення: Тут перший заголовок div заголовок приймає цілевисота (100% висота) сторінки, тепер для div bodyColumn знаходиться після вищезазначеного, тому він також має висоту 100%, тому він змушений це робити, але його маржа: 0 починається з того, де вміст закінчується (ось ваша navContainer div)
1 для відповіді № 2
Я думаю, що проблема полягає в класах і стилях, визначених у html.
У вищезгаданому випадку ви маєте клас headerRowбатькові та одній з її дітей. І ще одна дитина має тілоколмовий клас. Обидва елементи, що мають стиль висоти як 100%, намагаються прийняти 100% батьківської висоти та переповнення як авто, батько прокручується в разі переповнення.
Я намагався працювати у вашій скрипці, і видалення заголовкаRow з дочірнього елемента виправляє вашу проблему.
1 для відповіді № 3
Спробуйте змінити свій height:100% власність в bodyColumn і headerRow до min-height:100% подобається це:
.bodyColumn {
min-height: 100%;
overflow: auto;
}
.headerRow {
min-height: 100%;
overflow: auto;
}
Залиште висоту вашого тіла як height:100% хоча Не змінюйте висоту батьків до міні-висоти.