Wysokość ciała 100% wyświetlanie pionowego paska przewijania

Z ciekawości, biorąc pod uwagę przykład poniżej, dlaczego posiadanie marginesu w div #container powoduje, że pionowy pasek przewijania pojawia się w przeglądarce? Pojemnik jest o wiele mniejszy niż wysokość ciała ustawiona na 100%.Wysokość ciała 100% wyświetlanie pionowego paska przewijania

Ustawiłem wypełnienie i marginesy na 0 dla wszystkich elementów z wyjątkiem # kontenera. Zwróć uwagę, że celowo pominąłem pozycjonowanie bezwzględne w bloku div #container. W takim przypadku w jaki sposób przeglądarka oblicza wysokość ciała i jak wpływa na to margines?

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
* { padding:0; margin:0;} 
html, body { height:100%; } 
#container 
{ 
    padding:10px; 
    margin:50px; 
    border:1px solid black; 
    width: 200px; 
    height: 100px; 
} 
</style> 
</head> 
<body> 
    <div id='container'> 
    </div> 
</body> 
</html>

Przykład także na JSFiddle

Źródło

2012-10-20 neodymium

Zobacz również http://stackoverflow.com/questions/34357434/html-body-100-causing-scrollbar-to-appear –

If you paint the backgrounds of html and body (giving each its own color), szybko zauważysz, że body jest przesunięty w dół wraz z #container i #container sama nie jest odsunięty od góry body w ogóle. Jest to efekt uboczny z margin collapse, który szczegółowo omówię here (chociaż ta odpowiedź opisuje nieco inną konfigurację).

To zachowanie powoduje pojawienie się paska przewijania, ponieważ zadeklarowano, że body ma 100% wysokości html. Zwróć uwagę, że faktyczna wysokość body pozostaje nienaruszona, ponieważ marginesy nigdy nie są uwzględniane w obliczeniach wysokości.

Źródło

2012-10-20 15:36:06 BoltClock

Czy to znaczy wyżyny elementów na stronie są obliczane począwszy od okna, a następnie ciało, a następnie elementy wewnątrz/lub nad ciałem? Czy wszystkie wartości procentowe są konwertowane na wartości px lub pt lub em? – TMB

@TMB: Wysokość 100% na html czyni ją w 100% widoczną (obszar podglądu przeglądarki), a wysokość 100% na ciele sprawia, że jest ona w 100% nadrzędna, czyli 'html'. Wszelkie wartości procentowe, które nastąpią, są zawsze wartościami przodków danego elementu. Jeśli nie ustawisz 100% wysokości na "html" lub "body", zachowują się jak każdy inny element blokowy. Więcej informacji można znaleźć na stronie http://www.w3.org/TR/CSS21/syndata.html#percentage-units. % s i ems ostatecznie będą musiały zostać przekonwertowane na pewną bezwzględną wartość podczas renderowania, aby przeglądarka dokładnie wiedziała, jak duże lub małe mogą być mierzone i renderowane na ekranie. – BoltClock

@TMB: W przypadku jsFiddle wysokość okienka ekranu ma taką samą wysokość okienka wyników, ponieważ jest to zasadniczo element iframe. – BoltClock

-7

znalazłem szybkiego rozwiązania: spróbuj ustawić wysokość do 99,99% zamiast 100%

Źródło

2013-12-08 11:57:12 user1254226

to nie brzmi dobrze. Obiekt jest domyślnie zmieniany – speedingdeer

Istnieje wiele powodów, dla których jest to okropny pomysł, w tym arbitralne różnice wysokości na jedno okno użytkownika, a metody wewnętrznego zaokrąglania różnią się w zależności od przeglądarki. –

Trochę późno, ale może ktoś pomoże.

Dodawanie float: left; do #container usuwa pasek przewijania, jak mówi W3C:

• Marginesy unosił się między pola i każdym innym polu nie zawali (nawet pomiędzy pływakiem i jej dzieci-flow).

Źródło

2014-03-04 08:37:00 Michel

Dodaj overflow: hidden; do html i treści.

html, body { 
    height: 100%; 
    overflow: hidden; 
}

Źródło

2015-07-25 15:23:18 NexusRex

+21

to rozwiązanie całkowicie usuwa pasek przewijania. nawet na stronach, gdzie wymagany jest przewijanie – Vil

Typo w pierwszej linii, przepełnienie: ukryte –

oparciu @ odpowiedź BoltClock ♦ 's, naprawiłem go przez zerowanie margines ...
tak

html,body, #st-full-pg { 
    height: 100%; 
    margin: 0; 
}

prace gdzie id "st-full-pg" jest przypisany do div panel (który dodatkowo zawierał nagłówek i panel-panel-ciało)

Źródło

2017-01-04 11:05:30 harshvchawla

html, body { 
    height: 100%; 
    overflow: hidden; 
}

Jeśli chcesz usunąć ciało przewijanie dodać następujący styl:

Źródło

2017-03-23 08:37:47

Naprawiłem ten problem, gdy miałem 2 pionowe paski przewijania. Ustawienie html tak, aby 'overflow: hidden' i pozostawienie samego ciała poprawiło to. Zarówno moje ciało, jak i html mają 'height: 100%'. – Karai17

Ten problem został naprawiony wcześniej, gdzie umieściłeś całą zawartość body w opakowaniu div zwanym wrap. Styl okładki powinien być ustawiony na position: relative; min-height: 100%;. Aby umieścić pozycję #container div 50px od góry i po lewej stronie, umieść wewnątrz fartucha div z dopełnieniem ustawionym na 50 pikseli. Marginesy nie będą działać z wrapem i div, który właśnie utworzyliśmy, ale będą działały w #container i wszystkim w środku.

here's my fix on jsfiddle.

Źródło

2017-05-28 05:08:05 TheZacher5645

html,body { 
    height: 100%; 
    margin: 0; 
    overflow: hidden; 
}

ten pracował dla mnie

Źródło

2017-10-13 20:06:49 fjkjava

dodanie float:left; jest ładny, ale będzie kolidować z centralnego położenia poziomego za pomocą margin:auto;

jeśli wiesz, jak duży margines jest, można wyjaśnić, że w wysokości odsetek korzystania oblicz:

height: calc(100% - 50px);

wsparcie przeglądarka jest dobry, ale tylko IE11 + https://caniuse.com/#feat=calc

Źródło

2017-10-20 11:03:39

Wysokość ciała 100% wyświetlanie pionowego paska przewijania

Odpowiedz

Powiązane problemy