Dlaczego nie mogę utworzyć mojego div w wysokości 100%, jeśli używam typu dokumentu HTML5? Jak mogę to uzyskać? 100% wzrostu

Pracuję nad uzyskaniem układu posortowanego dla całkiem prostej przeglądarki internetowej, ale kiedy używam deklaracji w formacie HTML5, wysokość niektórych moich elementów div (które w 100%) uległa skróceniu w prawo w dół, i nie mogę sprawić, by powróciły do nich za pomocą CSS.Dlaczego nie mogę utworzyć mojego div w wysokości 100%, jeśli używam typu dokumentu HTML5? Jak mogę to uzyskać? 100% wzrostu

Moje HTML jest https://dl.dropbox.com/u/16178847/eyewitness/b/index.html i css jest https://dl.dropbox.com/u/16178847/eyewitness/b/style.css

Jeśli usunąć deklaracji DOCTYPE HTML5, wszystko jest tak, jak chcę go mieć, ale naprawdę chcę użyć właściwej deklaracji DOCTYPE HTML5.
Jeśli ustawię typ dokumentu na HTML5 i nie wprowadzę żadnych zmian, element div ze zdjęciem i stopkami div nie będzie widoczny, prawdopodobnie z powodu wartości 0px.
Jeżeli ustawić doctype do HTML5 i dokonać body { height: 100px } i .container { height: 100px } lub .container { height: 100% }, staje się widoczne, ale to, co jest mi potrzebne to być pełna wysokość, niż wysokość w pikselach.
Jeśli spróbuję zrobić to samo, co powyżej, ale z body { height: 100% }, zdjęcia i stopki div nie będą widoczne.

Co należy zrobić, aby uzyskać 100% wysokości, aby moje zdjęcia i stopki były pełne?

Źródło

2012-06-03 Grezzo

To nie ma nic wspólnego z HTML5 i CSS3. (Co dzieje się z jakimkolwiek innym typem docty? Od kiedy to "wysokość" jest nową rzeczą CSS3?) – BoltClock

Kiedy robisz ciało 100% wzrostu, czego oczekujesz, że będzie to 100%? – robertc

@BoltClock Dzięki za komentarz. To dobra strona o CSS3, usunąłem ten tag. Nie próbowałem żadnych innych doctypes, próbowałem go tylko bez doctype lub doctype HTML5. Co masz nadzieję dowiedzieć się z zachowania z innymi deklaracjami doctype? Jestem bardziej niż szczęśliwy, mogąc wypróbować kilka i złożyć raport, ale nie jestem pewien, które z nich byłyby odpowiednie do wypróbowania? – Grezzo

Tylko jeśli element macierzysty ma zdefiniowaną wysokość, nie jest to wartość auto. Jeśli ma on 100% wysokości, należy również zdefiniować wysokość nadrzędną rodzica. To może trwać aż do elementu głównego html.

tak ustawić wysokość html i element body do 100%, jak również każdy pojedynczy element przodka tego elementu, który chcesz mieć 100%height w pierwszej kolejności.

Źródło

2012-06-03 16:30:36 HerrSerker

Więc mówisz, że (w trybie standardów) nie ma sposobu na zrobienie strony takiej samej wysokość jako rzutnia (bez użycia javascript do ustawienia wysokości w jednostkach zamiast procentu)? – Grezzo

I'k mówisz, że możesz. Daj elementowi html wysokość 100%, nadaj elementowi ciała wysokość 100% i tak dalej z każdym elementem podrzędnym ciała i elementami podrzędnymi tego elementu, aż dotrzesz do elementu, który chcesz w 100% osiągnąć w 100%. – HerrSerker

To jest właśnie rozwiązanie, nie miałem pojęcia, że można zastosować CSS do elementu html. Niezłe! – Grezzo

Rzeczywiście, aby pracować zrobić następująco:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Vertical Scrolling Demo</title> 
    <style> 
    html, body { 
     width: 100%; 
     height: 100%; 
     background: white; 
     margin:0; 
     padding:0; 
    } 
    .page { 
     min-height: 100%; 
     width: 100%; 
    } 
    </style> 
</head> 
<body> 
    <div id="nav" class="page"> 
    <ul> 
     <li><a href="#about">About</a></li> 
     <li><a href="#portfolio">Portfolio</a></li> 
     <li><a href="#contact">Contact</a></li> 
    </ul> 
    </div> 
    <div id="page1" class="page"> 
    <h1><a name="about">about</a></h1> 
    About page content goes here. 
    </div> 
    <div id="page2" class="page"> 
    <h1><a name="portfolio">portfolio</a></h1> 
    Portfolio page content goes here. 
    </div> 
    <div id="page3" class="page"> 
    <h1><a name="contact">contact</a></h1> 
    Contact page content goes here. 
    </div> 
</body> 
</html>

Źródło

2012-06-08 08:50:51 barraq

Dlaczego nie mogę utworzyć mojego div w wysokości 100%, jeśli używam typu dokumentu HTML5? Jak mogę to uzyskać? 100% wzrostu

Odpowiedz

Powiązane problemy