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

86

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

html css

— neodym
źródło

Zobacz także stackoverflow.com/questions/34357434/…

— Matt Browne

65

Jeśli pomalujesz tła htmli body(nadając każdemu własny kolor) , szybko zauważysz, że bodyjest on przesuwany w dół wraz z #container, a #containersam w ogóle nie jest odsunięty od góry body. 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ś body100% wysokości html. Zwróć uwagę, że faktyczna wysokość bodynie ulega zmianie, ponieważ marginesy nigdy nie są uwzględniane w obliczeniach wysokości.

— BoltClock
źródło

Czy to oznacza, że wysokości elementów na stronie są obliczane zaczynając od okna, następnie ciała, a następnie elementów wewnątrz / lub nad treścią? Czy wszystkie procenty są konwertowane na wartości w pikselach, pt lub em?

— TMB

5

@ TMB: 100% wysokości włączone htmlsprawia, że jest to 100% widocznego obszaru (obszaru wyświetlania przeglądarki), a 100% wysokości bodypowoduje, że jest w 100% nadrzędne, czyli html. Wszelkie wartości procentowe, które następują, zawsze dotyczą przodków elementu. Jeśli nie ustawisz 100% wysokości na htmllub bodywtedy 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.

— BoltClock

1

@neodymium: Zgadza się. Oba htmli bodyzachowują się jak każdy inny element na poziomie bloku.

— BoltClock

8

Jak więc należy to naprawić? Przez pływający pojemnik jak sugeruje Michel ?

— Dan Dascalescu

1

@Daniel Albuschat: Jestem zaszczycony!

— BoltClock

20

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)

— harshvchawla
źródło

19

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

Dodanie float: left;do #containerusuwa 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).

— Michel
źródło

3

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

To zadziałało dla mnie

— fjkjava
źródło

2

jeśli masz stopkę, usuwa ją

— Alexander

3

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

— ben.tiberius.avery
źródło

Dlaczego 50px? Magiczny numer.

— Ivan Rubinson,

„jeśli wiesz, jak duża jest Twoja marża”. Wydaje mi się, że do tego odnosi się OP z 50px

— Clay

1

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

Jeśli chcesz usunąć przewijanie treści, dodaj następujący styl:

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

— lalit bhakuni
źródło

Rozwiązało to problem polegający na tym, że miałem 2 pionowe paski przewijania. Ustawienie HTML na posiadanie overflow: hiddeni pozostawienie body w spokoju naprawiło ten problem. Moje body i HTML mają height: 100%.

— Karai17,

1

Znalazłem rozwiązanie: dodaj wypełnienie: 1px 0; to body zapobiega pojawianiu się pionowych pasków przewijania

— Vikash Pal
źródło

0

Widziałem, że ten problem został rozwiązany wcześniej, gdy umieszczasz całą zawartość bodyw elemencie div o nazwie wrap. Styl zawijania powinien być ustawiony na position: relative; min-height: 100%;. Aby ustawić #containerelement 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ć #containeri wszystko w środku.

oto moja poprawka na jsfiddle .

— TheZacher5645
źródło

0

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 bodyzostał przesunięty w dół o 20 pikseli.

— Evan Hu
źródło

0

/*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;
}

— Walex996
źródło

0

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.

Nie100px 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 backgroundlinie, 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>

Rozwiń fragment

Powyższe zostało napisane tak, aby nadal istniało zwykłe wypełnienie. Możesz ustawić wymiary czerwonego divna 100%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>

Rozwiń fragment

— Fluorescencyjny Zielony 5
źródło

0

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;
    }
}

-2

Dodaj overflow: hidden;do html i body.

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

— NexusRex
źródło

42

to rozwiązanie całkowicie usuwa pasek przewijania. nawet na stronach, na których potrzebny jest zwój

— Vil

-9

Znalazłem szybkie rozwiązanie: spróbuj ustawić wysokość na 99,99% zamiast 100%

— user1254226
źródło

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

— Terra Ashley