2010-01-04 11 views
16

Dường như với tôi rằng một số DOCTYPE tờ khai trong IE (6-8) có thể làm cho trình duyệt để bỏ qua height="100%" trên bảng và divs (style="height:100%")Tại sao một số khai báo DOCTYPE nhất định gây ra 100% các bảng và các bảng cao cấp để ngừng hoạt động?

Ví dụ

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Test1</title> 
</head> 
<body> 
    <div style="border: 2px solid red; height: 100%"> 
    Hello World 
    </div> 
</body> 
</html> 

sẽ làm cho DIV với chiều cao của văn bản, nó sẽ không kéo dài. Việc xóa khai báo DOCTYPE làm cho số DIV kéo dài theo chiều dọc như mong muốn.

Vì vậy, câu hỏi của tôi là:

  1. Tại sao nó xảy ra?
  2. Làm cách nào để giữ cho các bảng DOCTYPEvẫn còn cho phép kéo dài?
  3. Điều đó có xảy ra với bạn không?
  4. Bạn có biết về nó ?, nó có nổi tiếng không?
+0

Có một lý do cụ thể tại sao 'chiều cao: 100%' hoạt động mà không cần DOCTYPE. Xem giải thích của tôi ở đây: http://stackoverflow.com/a/32215263/3597276 –

Trả lời

10
  1. Vì các trình duyệt cổ có kỳ quặc, hành vi không phù hợp và các trình duyệt đối xử với doctypes như an intelligence test để xem nếu tác giả đang viết code để các tiêu chuẩn hoặc những gì họ học được từ W3Schools một thập kỷ trước. Nếu bạn có height: 100% và chiều cao của phần tử gốc là auto thì 100% means auto.

  2. Nói chung, bạn không. Nó hét lên "layout table". Điều đó nói rằng, thiết lập chiều cao hoặc chiều cao tối thiểu trên các yếu tố html và cơ thể. Có những kỹ thuật khác, nhưng tôi không có một liên kết thuận tiện vào lúc này, thật kỳ lạ, tôi chưa bao giờ ở vị trí mà tôi cần kỹ thuật này.

  3. Đó là những gì các trình duyệt có nghĩa vụ phải làm, vì vậy ...

  4. Vâng, tôi trả lời câu hỏi này ...

+1

Vì vậy, việc loại bỏ tuyên bố DOCTYPE là tà ác thuần túy? Và có footers dính vào phía dưới là giao diện người dùng xấu? –

+0

Có, và không. Bạn có thể hiểu sai ý kiến ​​của tôi về việc có phần dưới cùng của bảng ** ** gắn vào cuối cửa sổ và/hoặc trang (tùy theo thời gian nào dài hơn). – Quentin

+0

Vì vậy, để hiểu, bám vào đáy, không phải là vấn đề, mà là mẫu "bảng bố trí" vì a) nó không thể được thực hiện bằng cách sử dụng nó (nếu bạn giữ DOCTYPE) và b) cũng là một thực hành không tốt (http : //www.hotdesign.com/seybold/). Để làm như vậy, người ta nên sử dụng các kỹ thuật khác (ví dụ: DIV và CSS hoàn toàn). Tôi đã làm đúng chứ? –

1

Khi bạn loại bỏ các loại tài liệu được trình duyệt chuyển sang chế độ quirks mà làm những việc khác nhau để giúp mã cũ hơn không được xác thực để hiển thị chính xác.

Bạn phải đặt chiều cao trên phần tử vùng chứa để div có chiều cao 100% không được thừa hưởng chiều cao: tự động;

Bạn có thể thử chuyển đổi từ chuyển tiếp thành nghiêm ngặt nhưng tôi nghi ngờ điều này sẽ khắc phục được sự cố của bạn.

8

Một giải pháp thực tế để "vấn đề" này sẽ được sử dụng CSS sau đây:

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

#mydiv { 
    height: 100%; 
} 

Tuy nhiên hãy nhớ rằng một biên giới cho biết thêm chiều cao.

+0

Xin cảm ơn! Thiếu bộ chọn html –

Các vấn đề liên quan