HTML/CSS: Dlaczego ciało nie rozciąga się do jego zawartości?

Weź ten banalny przykład i otworzyć go:HTML/CSS: Dlaczego ciało nie rozciąga się do jego zawartości?

<html> 
    <body style="background-image:url(http://upload.wikimedia.org/wikipedia/commons/2/21/Mandel_zoom_00_mandelbrot_set.jpg);background-repeat: no-repeat; background-position: top center;"> 
     <div style="width: 8000px; border: 3px solid red;">Demo</div> 
    </body> 
</html>

Strona jest wykonana tak, że ciało ma górną skoncentrowane obraz tła i zawierającą element, który przelewa granice okna więc jest przewijanie w poziomie (jeśli masz monitoruj szerzej niż 8000px, wtedy jesteś naprawdę fajny, zmniejsz okno i odśwież).

Problem polega na tym, że z jakiegoś powodu <body> nie rozciąga się, aby zawierać <div>. Pozostaje on na tej samej szerokości co okno ekranu i przepełnia je. To z kolei powoduje, że tło jest wycentrowane w niewłaściwym miejscu i przycina je do rozmiaru rzutni. Całkiem brzydko, gdy przewijasz w prawo.

Znalazłem już rozwiązanie tego problemu, ale zastanawiam się, DLACZEGO to jest tak? Wydaje się być również spójny w różnych przeglądarkach. Ale moim zdaniem jest to całkowicie sprzeczne z intuicją i zasadniczo niepoprawne błędne. Element pojemnika powinien być wystarczająco duży, aby pomieścić jego dzieci - o ile nie są one bezwzględnie ustawione, w takim przypadku nie biorą udziału w obliczeniach układu.

Źródło

2010-01-29 Vilx-

Hej. Powrót do tego 2 lata później i szukam tego samego rozwiązania, które mówisz, że znalazłeś. Odpowiedź Bobince'a nie pomaga, bardzo .. (Czy opcja jest jedyną opcją?) – SoreThumb

Nadal używam float. Sprawdź to tutaj: http://www.drowtales.com –

Bloki po prostu nie rozciągają się poziomo, aby pomieścić zawartość swoich dzieci; nigdy nie. (1) To jest coś, co dzieje się tylko w osi pionowej. (2) Logicznie, oba wymiary nie mogą być rozciągliwe; jeden musi zostać naprawiony (rodzic wrt). W CSS szerokość elementu blokowego w normalnym przepływie pochodzi wyłącznie od elementu nadrzędnego (minus odstępy, marginesy, krawędzie), a następnie wysokość wynika z tego, widząc, ile treści można dopasować do szerokości bloku i przepływając nim .

Tło obrazu może pojawić się w zagmatwanej miejscu, wprowadzającej w błąd cię do tego, co się rzeczywiście dzieje z powodu this quirk CSS:

przypadku dokumentów, których elementem głównym jest HTML „HTML” pierwiastek albo XHTML „html "element, który obliczył wartości" transparent "dla" background-color "i" none "dla" background-image ", programy użytkownika muszą zamiast tego użyć obliczonej wartości właściwości tła z pierwszego elementu HTML" BODY "tego elementu lub XHTML "body" element potomny podczas malowania tła dla obszaru roboczego i nie może malować tła dla tego elementu potomnego. Takie tła muszą być również zakotwiczone w tym samym miejscu, w którym byłyby malowane, gdyby były malowane tylko dla elementu głównego.

To paskudny hack, umieścić w miejscu, ponieważ ludzie zostały wykorzystane do wprowadzenia tła na „ciało” i po to wypełnić rzutnię, choć sam element <body> nie reprezentuje rzutnię.

(1) z wyjątkiem kilku specjalnych przypadków, takich jak float i position: absolute elementów bez zadeklarowanej wartości width.

(2) o ile użytkownik celowo tego nie przerwie, ustawiając height/overflow.

Źródło

2010-01-29 11:11:54 bobince

Byłem w stanie napisać dokładnie tę samą odpowiedź, ale bez cytatu ze specyfikacji CSS. +1 – Boldewyn

Wyjątkiem w rozszerzaniu jest obszar wyświetlania. Nic nie rozszerza widoku, chyba że wymaga tego jego bezpośrednia lub dołączona zawartość - obejmuje to elementy div i table (np. display: table-cell na ciele) - ale nie kontener blokowy.

Źródło

2010-01-29 11:05:49 Anonymous

HTML/CSS: Dlaczego ciało nie rozciąga się do jego zawartości?

Odpowiedz

Powiązane problemy