2010-10-20 9 views
19

Tôi muốn có một IFRAME động có kích thước bằng cách sử dụng CSS sau:IFRAME và vị trí tuyệt đối mâu thuẫn

#myiframe { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

Tuy nhiên, không có trình duyệt dường như hỗ trợ này.

Trong trình duyệt tốt, tôi có thể bọc IFRAME trong DIV bằng kiểu CSS được trích dẫn và đặt chiều cao & chiều rộng của IFRAME thành 100%. Nhưng điều này không hoạt động trong IE7. Ngắn của việc sử dụng các biểu thức CSS, có ai quản lý để giải quyết điều này?

Cập nhật

MatTheCat đã trả lời với một kịch bản mà làm việc nếu IFRAME được đặt trực tiếp dưới cơ thể và thẻ nội dung/html có chiều cao: 100% đề ra. Trong câu hỏi ban đầu của tôi, tôi không nêu rõ IFRAME ở đâu và kiểu dáng nào được áp dụng cho vùng chứa của nó. Hy vọng rằng các địa chỉ sau đây:

<html> 
    <body> 
     <div id="container"><iframe id="myiframe"></iframe></div> 
    </body> 
</html> 

và chúng ta hãy giả CSS container sau đây:

#container { 
    position: absolute; 
    top: 10px; 
    bottom: 10px; 
    left: 10px; 
    right: 10px; 
} 

nếu bây giờ bạn đặt height: 100% trên IFRAME nó sẽ không kích thước chính xác.

+1

tôi đề nghị bạn 'chấp nhận' một trong hai câu trả lời mới nhất ở đây vì cả hai trả lời câu hỏi. Tôi đã nhận được một khoản tiền thưởng. –

Trả lời

2
html,body { 
    margin:0; 
    padding:0; 
    height:100%; 
    min-height:100%; 
} 
#myiframe { 
    width:100%; 
    height:100%; 
    border:0; 
} 

làm việc tốt cho tôi ngay cả với IE7.

+0

Cảm ơn câu trả lời. Thật không may là tôi không đủ cụ thể trong câu hỏi. Tôi đã sửa đổi nó với nhiều chi tiết hơn. –

4

Tại sao bạn không sử dụng chiều cao & chiều rộng? Bạn vẫn sẽ nhận được một vị trí tuyệt đối bằng cách đặt trên/dưới & trái/phải, như trong ví dụ bên dưới.

<!DOCTYPE HTML> 
<html> 
    <head> 
     <style type="text/css"> 
      html, body { 
       margin:0; 
       padding:0; 
       border:0px; 
       height:100%; 
       width:100%; 
      } 
      #container { 
       position: absolute; 
       top: 10px; 
       bottom: 10px; 
       left: 10px; 
       right: 10px; 
      } 
      #myiframe { 
       position: absolute; 
       top: 0%; 
       left: 0%; 
       height: 100%; 
       width: 100%; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="container"><iframe id="myiframe"></iframe></div> 
    </body> 
</html> 

Điều này phù hợp với tôi (Thử nghiệm trên IE9).

+0

Tính năng này hoạt động. Điều duy nhất tôi bị thiếu là 'position: absolute' trên' iframe'. Bạn có thể giải thích tại sao tôi cần bọc 'iframe' trong một thùng chứa thay vì đặt CSS của vùng chứa lên nó không? –

+0

Bạn có ý gì khi đặt CSS của vùng chứa trên 'iframe'? Nếu bạn đang nói về việc không sử dụng một container ở nơi đầu tiên, thì phần tử body (parent) trở thành container của nó theo mặc định. – Sathvik

+0

Chúng ta vẫn có thể có được hiệu ứng tương tự bằng cách thay đổi các tham số 'top',' left', 'height' &' width' trên 'iframe'. – Sathvik

22

Sử dụng div cho phần đệm ở tất cả các cạnh. Đặt iframe trong nó bằng cách sử dụng 100% div cha của nó.

http://jsfiddle.net/sg3s/j8sbX/

Hiện có một vài điều bạn cần nhớ. Khung nội tuyến ban đầu là khung nội tuyến, do đó, trong khi trình duyệt hiện đại không quan tâm, hãy đặt hiển thị: chặn trên đó. Theo mặc định, nó cũng có một đường viền. Bất kỳ thay đổi nào chúng tôi muốn thực hiện cần được thực hiện trên vùng chứa iframe thay vào đó hoặc chúng tôi sẽ phá vỡ giới hạn vùng chứa 100%.

Và đây là cách chúng tôi sẽ đặt một yếu tố ở trên nó:

http://jsfiddle.net/sg3s/j8sbX/25/ (chỉnh sửa: tôi xấu, bạn thực sự cần phải thiết lập border = 0 trên iframe cho IE7)

nên hoạt động tốt trong IE7 + (IE6 không thích vị trí tuyệt đối + sử dụng trên/phải/dưới/trái để cho nó bố trí)

Sửa Một số phụ giải thích

Chúng ta cần phải tạo kiểu cho m chứa iframe ainly bởi vì một khung nội tuyến trên chính nó không cho phép chính nó được kích thước với đầu/trái/dưới/phải. Nhưng những gì sẽ làm việc là thiết lập chiều rộng và chiều cao của nó đến 100%. Vì vậy, bắt đầu từ đó, chúng ta chỉ cần bọc khung nội tuyến trong một phần tử mà chúng ta có thể tạo kiểu để tạo ít hơn 100% cửa sổ, kích thước mà các phần tử mặc định khi không có cha mẹ nào có chiều cao/chiều rộng tĩnh.

Suy nghĩ về nó, chúng tôi thực sự có thể thả tuyệt đối và chặn. http://jsfiddle.net/sg3s/j8sbX/26/ Có thể muốn kiểm tra lại IE7 về điều đó.

Sau khi chúng tôi đặt khung nội tuyến 100% cao và rộng, chúng tôi không thể đặt bất kỳ lề, đệm hoặc viền nào vì khung đó sẽ được thêm vào chiều rộng đã 100% chiều cao &. Do đó làm cho nó lớn hơn container của nó, cho divs sẽ dẫn đến tràn: hiển thị, chỉ đơn giản là hiển thị tất cả mọi thứ đi qua các cạnh. Nhưng điều đó sẽ làm xáo trộn lề, đệm và bù đắp chúng tôi đưa ra các yếu tố của chúng tôi .... Trên thực tế nó chỉ là chiều cao và chiều rộng 100% bạn phải chắc chắn rằng bạn đã loại bỏ đường viền mặc định iframe.

Hãy dùng thử bằng cách thêm đường viền lớn hơn (như 3px) trong ví dụ của tôi vào khung nội tuyến, bạn sẽ dễ dàng thấy được ảnh hưởng đến bố cục như thế nào.

+0

Tính năng này hoạt động. Điều duy nhất tôi bị thiếu là 'position: absolute' trên' iframe'. Bạn có thể giải thích tại sao tôi cần bọc 'iframe' trong một thùng chứa thay vì đặt CSS của vùng chứa lên nó không? Ngay cả sau khi áp dụng 'display: block' ... –

+0

@JustinSatyr đã cập nhật câu trả lời của tôi;) – sg3s

-1

Bạn có thể cố gắng sử dụng này:

document.getElementsByTagName('iframe')[1].style.borderWidth = '0px'; 
document.getElementsByTagName('iframe')[1].style.backgroundColor = 'green';