CSS 100% wysokości z wyściółką / marginesem

Istnieje nowa właściwość w CSS3, której możesz użyć do zmiany sposobu, w jaki model pudełkowy oblicza szerokość/wysokość.

Ustawiając tę właściwość wartością "border-box" powoduje, że dowolny element, który zastosujesz, nie będzie rozciągał się po dodaniu wypełnienia lub obramowania. Jeśli zdefiniujesz coś o szerokości 100px i wypełnieniu 10px, nadal będzie to szerokość 100px.

box-sizing: border-box;

Zobacz tutaj wsparcie dla przeglądarki . Nie działa dla IE7 i niższych, jednak I uwierz, że Dean Edward ma IE7.js dodaje wsparcie dla niego. Enjoy :)

Rozwiązaniem jest nie używać wysokości i szerokości w ogóle! Przymocuj wewnętrzne pudełko za pomocą górnego, lewego, prawego, dolnego, a następnie dodaj margines.

.box {margin:8px; position:absolute; top:0; left:0; right:0; bottom:0}

<div class="box" style="background:black">
  <div class="box" style="background:green">
    <div class="box" style="background:lightblue">
      This will show three nested boxes. Try resizing browser to see they remain nested properly.
    </div>
  </div>
</div>

Lepszym sposobem jest właściwość calc (). Więc twoja sprawa wyglądałaby tak:

#myDiv {
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    padding: 5px;
}

Zgodnie ze specyfikacją W3C wysokość odnosi się do wysokości widocznego obszaru, np. na monitorze o rozdzielczości 1280x1024 pikseli 100% wysokości = 1024 pikseli.

Min-height odnosi się do całkowitej wysokości strony wraz z zawartością, więc na stronie, gdzie zawartość jest większa niż 1024px min-height: 100% rozciągnie się, aby uwzględnić całą zawartość.

Innym problemem jest to, że padding i obramowanie są dodawane do wysokości i szerokości w większości nowoczesnych przeglądarek z wyjątkiem ie6(ie6 jest właściwie całkiem logiczne, ale nie jest zgodne ze specyfikacją). Nazywa się to modelem pudełkowym. Więc jeśli podasz

min-height: 100%;
padding: 5px; 

Da ci 100% + 5px + 5px za wysokość. Aby to obejść, potrzebujesz pojemnika na owijki.

<style>
    .FullHeight { 
       height: auto !important; /* ie 6 will ignore this */
       height: 100%;            /* ie 6 will use this instead of min-height */
       min-height: 100%;        /* ie 6 will ignore this */
    }

    .Padded {
       padding: 5px;
    }
</style>

<div class="FullHeight">
   <div class="Padded">
      Hello i am padded.
   </div
</div>

To jest jeden z idiotów CSS - jeszcze nie rozumiem rozumowania (jeśli ktoś wie, pls. wyjaśnij).

100% oznacza 100% wysokości kontenera - do której dodawane są dowolne marginesy, obramowania i wypełnienia. Tak więc nie jest możliwe uzyskanie kontenera, który wypełnia jego rodzica i który ma margines, obramowanie lub wypełnienie.

Zauważ również, że ustawienie wysokości jest notorycznie niespójne między przeglądarkami.

Kolejna rzecz, której się nauczyłem od zamieszczenia oznacza to, że procent jest względny względem długości kontenera , to znaczy jego szerokości, co sprawia, że procent jest jeszcze bardziej bezwartościowy dla wysokości.

W dzisiejszych czasach jednostki VH i VW viewport są bardziej przydatne, ale nadal nie są szczególnie przydatne dla niczego innego niż kontenery najwyższego poziomu.

1. Pełna wysokość z padding

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  padding: 50px;
  box-sizing: border-box;
  background: silver;
}

<div class="container">Hello world.</div>

2. Pełna wysokość z margin

body {
  margin: 0;
}
.container {
  min-height: calc(100vh - 100px);
  margin: 50px;
  background: silver;
}

<div class="container">Hello world.</div>

3. Pełna wysokość z border

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  border: 50px solid pink;
  box-sizing: border-box;
  background: silver;
}

<div class="container">Hello world.</div>

Innym rozwiązaniem jest użycie display: table, który ma inne zachowanie modelu pudełkowego.

Możesz ustawić wysokość i szerokość rodzica i dodać padding bez rozszerzania go. Dziecko ma 100% wzrostu i szerokości minus podkładki.

JSBIN

Inną opcją byłoby użycie propperty o rozmiarze pudełkowym. Jedynym problemem z obu byłoby to, że nie działają w IE7.

Inne rozwiązanie: możesz użyć jednostek procentowych dla marginesów, jak również rozmiarów. Na przykład:

.fullWidthPlusMargin {
    width: 98%;
    margin: 1%;
}

Głównym problemem jest to, że marginesy będą nieznacznie wzrastać/zmniejszać się wraz z rozmiarem elementu nadrzędnego. Prawdopodobnie preferowaną funkcjonalnością jest to, aby marginesy pozostały stałe, a element potomny rosł/zmniejszał się, aby wypełnić zmiany w odstępach. W zależności od tego, jak ciasny musi być wyświetlacz, może to być problematyczne. (Ja też wybrałbym mniejszy margines, jak 0.3%).

Przykład Franka trochę mnie zdezorientował - nie zadziałał w moim przypadku, ponieważ nie rozumiałem jeszcze wystarczająco dobrze pozycjonowania. Ważne jest, aby pamiętać, że nadrzędny element kontenera musi mieć pozycję niestatyczną (wspomniał o tym, ale przeoczyłem to i nie było tego w jego przykładzie).

Oto przykład, w którym dziecko-biorąc pod uwagę wypełnienie i obramowanie-używa bezwzględnego pozycjonowania, aby wypełnić rodzica w 100%. Rodzic wykorzystuje pozycjonowanie względne w celu zapewnienia punktu odniesienia dla pozycja dziecka pozostając w normalnym przepływie - kolejny element "more-content"nie jest naruszony:

#box {
    position: relative;
    height: 300px;
    width: 600px;
}

#box p {
    position: absolute;
    border-style: dashed;
    padding: 1em;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

<div id="box">
  <p>100% height and width!</p>
</div>
<div id="more-content">
</div>

Przydatny link do szybkiej nauki pozycjonowania CSS

Jest teraz 2018, Nowe Gorące gówno powinno być wspomniane tutaj, ponieważ pytanie ciągle pojawia się w Google.

Rozwiązanie z flexbox (działa na IE11): (lub widok na jsfiddle )

<html>
  <style>
    html, body {
      height: 100%; /* fix for IE11, not needed for chrome/ff */
      margin: 0; /* CSS-reset for chrome */
    }
  </style>
  <body style="display: flex;">
    <div style="background-color: black; flex: 1; margin: 25px;"></div>
  </body>
</html>

(CSS-reset niekoniecznie jest ważny dla rzeczywistego problemu.)

Ważną częścią jest flex: 1 (w połączeniu z display: flex w rodzicu). Najzabawniejsze wyjaśnienie, jakie znam, jak działa właściwość Flex, pochodzi z React-native dokumentacja, więc i tak się do niej odwołuję .

Obramowanie wokół div, zamiast marginesu treści strony

Inne rozwiązanie-chciałem tylko prostą ramkę wokół krawędzi mojej strony i chciałem 100% wysokości, gdy zawartość była mniejsza.

Border-box nie działał, a stałe pozycjonowanie wydawało się złe dla tak prostej potrzeby.

Skończyło się na dodaniu obramowania do mojego kontenera, zamiast polegać na marginesie treści strony-wygląda to tak:

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

.container {
    width: 100%;
    min-height: 100%;
    border: 8px solid #564333;
}

  <style type="text/css">
.stretchedToMargin {
    position:absolute;
    width:100%;
    height:100%;

}
</style>