EDYTOWAĆ: Wydaje się, że Fiddle nie ładuje poprawnie Bootstrap Twittera, więc sugeruję, abyś wkleił kod HTML i CSS do pustego pliku .html na pulpicie i rozwiązał problem z tym plikiem. Pamiętaj, aby poprawnie uwzględnić Twitter Bootstrap 3 (CDN jest w moim kodzie HTML poniżej), ponieważ problem pojawia się tylko wtedy, gdy dołączony jest Bootstrap.
Oto moje skrzypce / kod: http://jsfiddle.net/maLog1sm/
A oto kod, który jest na skrzydle:
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%;
}
Używa bootstrap 3. Zastanawiam się, dlaczego jest tam pionowy pasek przewijania i jak mogę go usunąć (na skrzydle, pasek przewijania pojawia się niezależnie od tego, czy okno przeglądarki jest zmniejszone, ale na mojej aktualnej stronie internetowej pojawia się tylko wtedy, gdy okno jest zmniejszone. skurczony, mam na myśli, gdy zmniejszam szerokość okna przeglądarki, tak aby była ona „zmaksymalizowana”.
Odpowiedzi:
3 dla odpowiedzi № 1Problem z twoim kodem to ty, który dajeszwysokość 100% do HTML i BODY, nie ma problemu. Również dałeś taką samą wysokość: 100% do 2 klas (dwóch div) wewnątrz, teraz HTML nie może dać 100% obu wewnętrznych div. wspomnieć wysokość: auto do klasy, która dostosuje wysokość zgodnie z dostępną treścią.
Tutaj Spróbuj zastąpić wysokość: 100% wysokości: auto; dla klasy .bodyColumn rozwiąże problem
CSS : Zaktualizowano
.bodyColumn {
position:absolute !important;
bottom:0%;
height: auto;
overflow: auto;
}
.headerRow {
height: 100%;
overflow: auto;
}
.footer {
display:block;
}
PRÓBNY : Zaktualizowano
Wyjaśnienie: Tutaj pierwszy div headerRow bierze całośćwysokość (100% wysokości) strony, teraz dla div bodyColumn znajduje się po powyższym, więc ma również podaną wysokość 100%, więc jest zmuszony to zrobić, ale jego margines: 0 zaczyna się od miejsca, gdzie kończy się treść navContainer div)
1 dla odpowiedzi nr 2
Myślę, że problem dotyczy klas i stylów zdefiniowanych w html.
W powyższym przypadku masz klasę headerRowrodzicem i jednym z jego dzieci. A inne dziecko ma klasę bodyColumn. Oba elementy o wysokości 100% próbują pobrać 100% wysokości rodzica i przepełnić jako auto, rodzic będzie się przewijał w przypadku przepełnienia.
Próbowałem pracować w skrzynce i usunięcie headerRow z elementu potomnego rozwiązuje problem.
1 dla odpowiedzi nr 3
Spróbuj zmienić swoje height:100% własność w bodyColumn i headerRow do min-height:100% lubię to:
.bodyColumn {
min-height: 100%;
overflow: auto;
}
.headerRow {
min-height: 100%;
overflow: auto;
}
Zostaw swoją wysokość ciała jako height:100% chociaż. Nie zmieniaj wysokości nadrzędnej na minimalną.