Wewnętrzny dziób 100% szerokości div rodzica przekracza granice

Question

Wiem, że to może być zwykły problem, ale nie znalazłem rozwiązania na tej stronie ani innych.

Zrobiłem ten skrzypce: http://jsfiddle.net/xzdead/jxsYx/3/

div Wewnętrzna „div_mainPanel” ma szerokość 100%, ale jeśli spojrzeć w prawym dolnym rogu jest dominująca nad div.

I haver próbował usunąć szerokość: 100 na wewnętrzny div i problem z szerokością został rozwiązany, ale nie wzrost. W każdym razie, dlaczego wyrasta z nadrzędnego elementu div, jeśli ustawiłem wodo na 100%, a margines - dopełnienie jest ustawione na 0 pikseli?

góry dzięki

Answer 1

Liczba obramowań do obliczeń wielkości. Twój wewnętrzny div odbiera 100% wysokości/szerokości elementu nadrzędnego, więc staje się 500x300, ale następnie dodaje 2px dookoła dla granicy, więc to naprawdę 502x302 i przecieki nad granicą rodzica na prawej/dolnej krawędzi.

Answer 2

To dlatego atrybut border podchodzi do 100% ... sama jak wartość padding.

to dlatego jego 2px obecnie.

Answer 3

To jest poprawne zachowanie. Wewnętrzny element div jest ustawiony na 100% szerokości elementu nadrzędnego, ale nie zawiera obramowania, więc jest to 100% + 2px.

Aby zapobiec wewnętrznej div są wyświetlane poza granicami rodzica, dodać box-sizing: border-box zarówno dla rodzica i dziecka:

#div_mainContainer { 
 
    width: 500px; 
 
    height: 300px; 
 
    background-color: #f8f8f8; 
 
    border: 1px solid red; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    box-sizing: border-box; 
 
} 
 

 
#div_mainPanel { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0px; 
 
    border: 1px solid yellow; 
 
    box-sizing: border-box; 
 
}

<div id="div_mainContainer"> 
 
    <div id="div_mainPanel"></div> 
 
</div>

Answer 4

Obiekt granica nie jest obliczana w szerokości w polu. Tak więc twoje pole jest obliczane jako 100% + 2px dla granicy. Jeśli chodzi o szerokość, po prostu usuń width: 100%, ponieważ podział (element blokowy) zostanie już rozwinięty, aby automatycznie wypełnić szerokość kontenera, co jest lepsze niż szerokość 100% (ponieważ będzie uwzględniać dopełnienie, obramowanie i margines).

Jeśli zawsze używasz dokładnej wysokości w pojemniku nadrzędnym, dlaczego nie po prostu użyć wysokości 498px na dziecko, które obliczy do całkowitej wysokości 500px dla dziecka.

Answer 5

Jest teraz o wiele lepszy sposób, aby rozwiązać ten problem: użyj border-box zaklejania dla CSS:

http://paulirish.com/2012/box-sizing-border-box-ftw/

Teraz 100% będzie znacznie bardziej naturalny sposób ustawić rozmiary elementów podrzędnych.