Wpis z mikrobloga

Mam problem, może ktoś podrzuci radą. Staram się zrozumieć elementy body i html. Znalazłem mały atrykuł trafiający w problem i to co chcę wiedzieć: Link
I nie zgadza mi się z obserwacjami.
Dodanie 'border' do 'body' i 'html' temu przeczy bo obie granice rozciągają się, żeby obejmować wszystko co mam w środku 'body'. A zgodnie z linkiem granica html powinna kończyć się wraz z końcem okna.

Dalej. Jeżeli body działa tak jak tam opisano czyli jak zwykły div to dodanie overflow: hidden nie powinno nic zmienić. A zmienia. I w ten sposób już nic nie rozumiem.

Plus jeżeli wyrzucam za pomocą JSa wysokość elementu html to wyrzuca tyle ile obejmuje border (mierzyłem mniej więcej i nie wiem czy z borderem czy bez). Jakby html w ogóle nie zwracał uwagi na okno.

I ostatnie. Jak dam diva do body i nadam mu wartości:
div {
height: 100%;
width: 40px;
position: absolute;
top: 0;
left: 0;

background: blue;
}

To normalnie zawsze zajmuje całą wysokość okna z lewej strony, bez zwrócenia uwagi na wyskośc htmla i do tego przysłania jego border. Natomiast gdy dodatkowow rzucę position: relative do body to zajmuje całą wysokośc body, ale już nie zasłania granicy elementy body.

I tym sposobem kompletnie nic teraz nie rozumiem. W żaden logiczny porządek nie potrafię tego poskładać. Chyba nie pomijam coś nad htmlem? Wiem, chaotycznie.

#html5 #html #css #javascript #webdev
  • 5
@i_found_a_whistle: trochę zbyt chaotycznie napisałeś, mógłbyś na jsfiddle wysłać to o zrobiłeś? i na nim opisać o co chodzi? ( ͡° ͜ʖ ͡°),

Jedyne co chyba rozumiem to:

Dodanie 'border' do 'body' i 'html' temu przeczy bo obie granice rozciągają się, żeby obejmować wszystko co mam w środku 'body'. A zgodnie z linkiem granica html powinna kończyć się wraz z końcem okna.


I pytanie czy body i
@i_found_a_whistle: Dobra, nie wiem do czego zmierzasz i co chcesz osiągnąć. ;x ale masz tak:

window > #document > html > body
window ma 100vw x 100vh wysokość, document ma te same co window, html w standardzie ma te same co poprzednicy, i nie zwiększa się, chyba, ze sami mu nadamy wysokość (gdzie nie ma sensu, jeśli body jest mniejszy), potem mamy body gdzie body ma wysokość w zależności od contentu,
@Vandzior: Ale częśc z tego co napisałeś w oczywisty spsoó” nie zgadza się z tym co widać.

i zazwyczaj maksymalna jego wysokość to 100% html, chyba, że ustalimy mu ręcznie więcej [to o body]


W załączonym Fiddlu wysokość html i body jest wyraźnie większa od wysokości window / #document (co widać po border i po tym co wypisuje JS na konsolę), mimo iż nic ręcznie nie ustalałem.

a content ma powiedzmy