Z ciekawości, biorąc pod uwagę poniższy przykład, dlaczego margines elementu div #container powoduje pojawienie się pionowego paska przewijania w przeglądarce? Pojemnik ma znacznie mniejszą wysokość niż wysokość ciała, która jest ustawiona na 100%.
Ustawiłem dopełnienie i marginesy na 0 dla wszystkich elementów oprócz #container. Zauważ, że celowo pominąłem pozycjonowanie bezwzględne w div #container. W takim razie jak 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 również na JSFiddle
Odpowiedzi:
Jeśli pomalujesz tła
html
ibody
(nadając każdemu własny kolor) , szybko zauważysz, żebody
jest on przesuwany w dół wraz z#container
, a#container
sam w ogóle nie jest odsunięty od górybody
. Jest to efekt uboczny załamania marginesów , który szczegółowo omówię tutaj (chociaż ta odpowiedź opisuje nieco inną konfigurację).To właśnie to zachowanie powoduje pojawienie się paska przewijania, ponieważ zadeklarowałeś
body
100% wysokościhtml
. Zwróć uwagę, że faktyczna wysokośćbody
nie ulega zmianie, ponieważ marginesy nigdy nie są uwzględniane w obliczeniach wysokości.źródło
html
sprawia, że jest to 100% widocznego obszaru (obszaru wyświetlania przeglądarki), a 100% wysokościbody
powoduje, że jest w 100% nadrzędne, czylihtml
. Wszelkie wartości procentowe, które następują, zawsze dotyczą przodków elementu. Jeśli nie ustawisz 100% wysokości nahtml
lubbody
wtedy zachowują się jak każdy inny element blokowy. Aby uzyskać szczegółowe informacje, zobacz w3.org/TR/CSS21/syndata.html#percentage-units . Wszystkie% si ems będą ostatecznie musiały zostać przekonwertowane na jakąś wartość bezwzględną podczas renderowania, aby przeglądarka dokładnie wiedziała, jak duże lub małe ma mierzyć i renderować rzeczy na ekranie.html
ibody
zachowują się jak każdy inny element na poziomie bloku.Opierając się na odpowiedzi @ BoltClock ♦, naprawiłem to przez wyzerowanie marginesu ...
tak
html,body, #st-full-pg { height: 100%; margin: 0; }
działa, gdzie id "st-full-pg" jest przypisane do elementu div panelu (który zawierał ponadto nagłówek panelu i korpus panelu)
źródło
Trochę późno, ale może komuś to pomoże.
Dodanie
float: left;
do#container
usuwa pasek przewijania, jak mówi W3C:• Marginesy między polem pływającym a jakimkolwiek innym prostokątem nie zapadają się (nawet między elementem zmiennoprzecinkowym a jego elementami podrzędnymi w przepływie).
źródło
html,body { height: 100%; margin: 0; overflow: hidden; }
To zadziałało dla mnie
źródło
dodawanie
float:left;
jest przyjemne, ale koliduje z centralnym pozycjonowaniem poziomymmargin:auto;
jeśli wiesz, jak duża jest Twoja marża, możesz to uwzględnić w procentach wzrostu za pomocą kalkulatora:
height: calc(100% - 50px);
obsługa przeglądarek jest dobra, ale tylko IE11 + https://caniuse.com/#feat=calc
źródło
html, body { height: 100%; overflow: hidden; }
Jeśli chcesz usunąć przewijanie treści, dodaj następujący styl:
body { height: 100%; overflow: hidden; }
źródło
overflow: hidden
i pozostawienie body w spokoju naprawiło ten problem. Moje body i HTML mająheight: 100%
.Znalazłem rozwiązanie: dodaj wypełnienie: 1px 0; to body zapobiega pojawianiu się pionowych pasków przewijania
źródło
Widziałem, że ten problem został rozwiązany wcześniej, gdy umieszczasz całą zawartość
body
w elemencie div o nazwie wrap. Styl zawijania powinien być ustawiony naposition: relative; min-height: 100%;
. Aby ustawić#container
element div 50px od góry i po lewej, umieść element div wewnątrz zawijania z dopełnieniem ustawionym na 50 pikseli. Marginesy nie będą działać z utworzonym przez nas opakowaniem i divem, ale będą działać#container
i wszystko w środku.oto moja poprawka na jsfiddle .
źródło
Zainspirowany @BoltClock, wypróbowałem to i zadziałało, nawet przy powiększaniu i powiększaniu.
Browser: Chrome 51
html{ height: 100%; } body{ height: 100%; margin: 0px; position: relative; top: -20px; }
Myślę, że
body
został przesunięty w dół o 20 pikseli.źródło
/*removes default margin & padding*/ html, body{ padding: 0px !important; margin: 0px !important; } /*sets body height to max; and allows scrollbar as page content grows*/ body{ min-height: 100vh; }
źródło
Dla tych, którzy przyjeżdżają tutaj po łatwiejszą do zrozumienia odpowiedź, która zawiera nawet próbki kodu, ta odpowiedź (skopiowana stąd ) jest dla Ciebie.
Nie
100px
jest wymagany JavaScript ani określone wartości pikseli (takie jak ), tylko czysty CSS i procenty.Jeśli twój div po prostu siedzi tam sam,
height: 50%
będzie oznaczać 50% wysokości ciała. Zwykle wysokość ciała wynosi zero bez jakiejkolwiek widocznej zawartości, więc 50% z tego to po prostu, no cóż, zero.Oto rozwiązanie (bazujące na tym ) (odkomentuj
background
linie, aby uzyskać wizualizację wypełnienia):/* Makes <html> take up the full page without requiring content to stretch it to that height. */ html { height: 100%; /* background: green; */ } body { /* 100% the height of <html> minus 1 multiple of the total extra height from the padding of <html>. This prevents an unnecessary vertical scrollbar from appearing. */ height: calc(100% - 1em); /* background: blue; */ } /* In most cases it's better to use stylesheets instead of inline-CSS. */ div { width: 50%; height: 50%; background: red; }
<div></div>
Powyższe zostało napisane tak, aby nadal istniało zwykłe wypełnienie. Możesz ustawić wymiary czerwonego
div
na100%
i nadal widzieć wypełnienie po każdej stronie / końcu. Jeśli nie chcesz tego wypełnienia, użyj tego (chociaż nie wygląda ładnie, radzę trzymać się pierwszego przykładu):/* Makes <html> take up the full page without requiring content to stretch it to that height. */ html, body { height: 100%; } /* You can uncomment it but you wouldn't be able to see it anyway. */ /* html { background: green; } */ body { margin: 0; /* background: blue; */ } /* In most cases it's better to use stylesheets instead of inline-CSS */ div { width: 50%; height: 50%; background: red; }
<div></div>
źródło
Mi to pasuje:
html, body { height: 100%; height: -webkit-fill-available; // Chrome } // Firefox @-moz-document url-prefix() { body { box-sizing: border-box; margin: 0; padding: 1px; } }
źródło
Dodaj
overflow: hidden;
do html i body.html, body { height: 100%; overflow: hidden; }
źródło
Znalazłem szybkie rozwiązanie: spróbuj ustawić wysokość na 99,99% zamiast 100%
źródło