Làm thế nào để tạo một hộp điền vào toàn bộ trang web trong tất cả các trình duyệt?

Tôi đã tạo một trang web có mã sau và xem nó trong Google Chrome.Làm thế nào để tạo một hộp điền vào toàn bộ trang web trong tất cả các trình duyệt?

<html> 
<head> 
     <style type="text/css"> 
       html {padding:30px; background-color:blue;} 
       body {margin:0px; background-color:red;} 
     </style> 
</head> 
<body> 
hello world 
</body> 
</html>

Kết quả là những gì tôi mong đợi, một hộp màu đỏ có đường viền màu xanh 30 pixel lấp đầy toàn bộ cửa sổ trình duyệt web. Tuy nhiên, khi tôi xem nó trong Firefox, hộp màu đỏ chỉ là chiều cao của một dòng chiều cao. Trong IE8, không có viền màu xanh.

Làm cách nào để Firefox và IE8 hiển thị giống như những gì tôi thấy trong Google Chrome?

Ghi chú bổ sung Tôi đã thử thêm các loại thẻ doctype khác vào trang, nhưng điều đó chỉ làm cho nó xuất hiện như Firefox, tức là 1 dòng chiều cao màu đỏ.

Nguồn

2011-10-26 John

Đối với điều này tôi nghĩ rằng bạn phải nghỉ mát để định vị tuyệt đối hoặc tương đối; nếu không, kết hợp chiều cao/lề của bạn sẽ đẩy dòng dưới cùng màu xanh ra khỏi màn hình. Điều này làm việc qua trình duyệt cho trường hợp đơn giản này. Hy vọng rằng nó hoạt động cho trường hợp sử dụng phức tạp hơn của bạn.

<!DOCTYPE html> 
<html> 
    <head> 
    <style type="text/css"> 
     body { background:blue; } 
     .first{ 
     position:absolute; /* fixed also works */ 
     background:red; 
     top:30px; 
     left:30px; 
     right:30px; 
     bottom:30px; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="first">hello world</div> 
    </body> 
</html>

Nguồn

2011-10-26 14:10:07 scottheckel

nếu tôi hiểu bạn một cách chính xác, thiết lập chiều rộng nội dung html & của bạn đến 100%, chiều cao 100%

http://jsfiddle.net/Diezel23/Lv6Vw/#base

Nguồn

2011-10-26 13:55:02

http://jsfiddle.net/Diezel23/Lv6Vw/#base –

Tôi không nghĩ chính xác vì bạn không thấy đường viền màu xanh ở dưới cùng. – scottheckel

Bạn có thể thêm một div thêm:

<html> 
    <head> 
     <style> 
      body { 
       padding: 30px; 
       margin: 0px; 
      } 
      div { 
       width: 100%; 
       height: 100%; 
       background-color: blue; 
      } 
     </style> 
    </head> 
    <body> 
     <div> 
      ABC 
     </div> 
    </body> 
</html>

Nguồn

2011-10-26 13:56:46 NCode

Làm thế nào để tạo một hộp điền vào toàn bộ trang web trong tất cả các trình duyệt?

Trả lời

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