Khung nội tuyến toàn màn hình với chiều cao 100%

238

Là iframe height = 100% được hỗ trợ trong tất cả các trình duyệt?

Tôi đang sử dụng doctype như:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Trong mã iframe của tôi, nếu tôi nói:

<iframe src="xyz.pdf" width="100%" height="100%" />

Ý tôi là nó thực sự sẽ lấy chiều cao của trang còn lại (vì có một khung khác ở trên cùng với chiều cao cố định là 50px) Điều này có được hỗ trợ trong tất cả các trình duyệt chính (IE / Firefox / Safari) không?

Cũng liên quan đến thanh cuộn, mặc dù tôi nói scrolling="no", tôi có thể thấy thanh cuộn bị vô hiệu hóa trong Firefox ... Làm cách nào để tôi ẩn hoàn toàn thanh cuộn và tự động đặt chiều cao iframe?

javascript  html  css  iframe  html-frames 
— kiểm tra
nguồn
14
Xem thực sự tôi không cài đặt tất cả các trình
— duyệt..Cũng
1
Bạn cũng có thể thử nó trong một trình xác nhận css.
— Ruben
6
Vâng, điều đó không đưa ra bất kỳ lỗi / cảnh báo nào ... Nhưng câu hỏi của tôi là tất cả các trình duyệt có thực sự áp dụng chiều cao 100% không?
— testndtv
Đối với tôi câu trả lời này hoạt động tốt: stackoverflow.com/questions/5272519/
— Zied Hamdi

Câu trả lời:

275

Bạn có thể sử dụng frameset làm trạng thái trả lời trước nhưng nếu bạn khăng khăng sử dụng iFrames, 2 ví dụ sau sẽ hoạt động:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

Một thay thế:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

Để ẩn cuộn với 2 lựa chọn thay thế như hình trên:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

Hack với ví dụ thứ hai:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

Để ẩn các thanh cuộn của iFrame, cha mẹ được tạo overflow: hiddenđể ẩn các thanh cuộn và iFrame được tạo để tăng tới 150% chiều rộng và chiều cao, buộc các thanh cuộn bên ngoài trang và vì cơ thể không có thanh cuộn người ta có thể không mong đợi iframe vượt quá giới hạn của trang. Điều này ẩn các thanh cuộn của iFrame với chiều rộng đầy đủ!

— Cây rìu
nguồn
3
Nghe có vẻ tốt..Chỉ cần một câu hỏi ... Tại sao chúng ta cần sử dụng style = "height: 100%; width: 100%;" khi chúng ta nói rằng iframe height = "100%" width = "100%"
— testndtv
1
Ngoài ra, chỉ có IE không lấy 100% chiều cao (mất khoảng 200px ht) ... FF và Safri lấy hết chiều cao còn lại ..
— testndtv
@Boris Zbarsky Vâng, cảm ơn vì đã cho tôi biết điều đó! Tôi đã cập nhật bài viết ngay bây giờ !! @hmthr Câu hỏi đầu tiên của bạn liên quan đến thẻ đôi là bởi vì các trình duyệt trước đó có các thẻ "chiều cao" và "chiều rộng" nhưng không hoạt động tốt với các thẻ kiểu! Về lỗi IE, tôi muốn bạn gắn bó với mã đầu tiên cho trường hợp đó.
— Axe
15
Để có được iframe sử dụng đúng 100%, cha mẹ cần phải là 100%. Trong các loại tài liệu mới hơn, thẻ html và thẻ body không tự động 100%. Khi tôi thêm chiều cao: 100% cho html và cơ thể thì nó hoạt động hoàn hảo. Vì vậy, câu trả lời chính xác cho câu hỏi, tôi nghĩ, là câu trả lời từ rudie, ngoại trừ việc tôi phải giữ tài liệu xhtml của mình. Ngoài ra, lưu ý rằng các quy tắc tràn là không cần thiết. Thanh cuộn sau đó hoạt động như dự định - tự động.
— Xoắn ốc
3
Câu trả lời SO này cũng rất ngắn và hay.
— Uwe Keim
164

3 cách tiếp cận để tạo toàn màn hình iframe:

  • Cách tiếp cận 2 - Định vị cố định

    Cách tiếp cận này khá đơn giản. Chỉ cần đặt vị trí của fixedphần tử và thêm a height/ widthof 100%.

    Ví dụ ở đây

    iframe {
    position: fixed;
    background: #000;
    border: none;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 100%;
    height: 100%;
}
    <iframe></iframe>
    Mở rộng đoạn trích

  • Cách tiếp cận 3

    Đối với phương pháp cuối cùng này, chỉ cần thiết lập heightcủa body/ html/ iframeyếu tố để 100%.

    Ví dụ ở đây

    html, body {
    height: 100%;
    margin: 0;         /* Reset default margin on the body element */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    width: 100%;
    height: 100%;
}
    <iframe></iframe>
    Mở rộng đoạn trích

— Josh Crozier
nguồn
4
Cuối cùng tôi đã sử dụng một biến thể của tùy chọn 1 ... Tôi đã sử dụng chiều rộng: 100% và chiều cao: 100vh vì nguồn tôi đang kéo khá rộng và iframe được chứa trong div. Giải pháp tuyệt vời. Cảm ơn bạn.
— NotJay
2
thêm vào display: blockđã thực hiện thủ thuật để ngăn chặn việc có một thanh cuộn kép
— KavenG
45

1. Thay đổi DOCTYPE của bạn thành một cái gì đó ít nghiêm ngặt hơn. Đừng sử dụng XHTML; thật ngớ ngẩn. Chỉ cần sử dụng tài liệu HTML 5 và bạn sẽ ổn:

<!doctype html>

2. Bạn có thể cần đảm bảo (tùy thuộc vào trình duyệt) rằng cha mẹ của iframe có chiều cao. Và cha mẹ của nó. Và cha mẹ của nó. Vân vân:

html, body { height: 100%; }
— Rudie
nguồn
9
Phần quan trọng ở đây đối với tôi là thẻ html và thẻ body cần chiều cao: 100%. Cảm ơn.
— Xoắn ốc
1
Cài đặt cơ thể chỉ hoạt động trong Chrome, nhưng không phải trong các trình duyệt khác.
— Dingle
— Josh Crozier
36

Tôi gặp vấn đề tương tự, tôi đã kéo iframe thành div. Thử cái này:

<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>

Chiều cao được đặt thành 100vh, tương ứng với chiều cao của khung nhìn. Ngoài ra, chiều rộng có thể được đặt thành 100vw, mặc dù bạn có thể gặp sự cố nếu tệp nguồn phản hồi (khung của bạn sẽ trở nên rất rộng).

— Ngày mai
nguồn
3
liền mạch không được hỗ trợ trong bất kỳ trình duyệt nào theo như tôi biết
— VisualBean
1
Sau khi dành nhiều thời gian hơn tôi quan tâm để thừa nhận lo lắng về vấn đề này, đây là CHÍNH XÁC những gì tôi cần. Ngoại trừ thay vì một trang web, tôi đã sử dụng một tệp HTML khác, yêu cầu điều chỉnh nhỏ về chiều cao của khung nhìn và bây giờ rất tốt để sử dụng. Cảm ơn bạn!
— Thomas Jacobs
29

Điều này hoạt động rất tốt đối với tôi (chỉ khi nội dung iframe đến từ cùng một tên miền ):

<script type="text/javascript">
function calcHeight(iframeElement){
    var the_height=  iframeElement.contentWindow.document.body.scrollHeight;
    iframeElement.height=  the_height;
}
</script>
<iframe src="./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>
— Ivan
nguồn
21
Điều này sẽ chỉ hoạt động nếu iframe srctrên cùng một tên miền với trang mẹ, nếu không, bạn sẽ nhận được một quyền từ chối lỗi trên contentWindow.document.
— wolfyuk
Mất một chút để làm cho công việc này bên trong Wordpress, tôi chỉ cần thêm một shortcode trong plugin của mình. CÔNG TRÌNH THÍCH MỘT CHARM.
— Andy
Nó hoạt động. nhưng vấn đề là nó sẽ không được tính toán lại chiều cao trên mỗi postback iframe bên trong. Có bất kỳ công việc xung quanh ?
— Behrouz.M
7 

body {
    margin: 0;            /* Reset default margin */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 100vh;        /* Viewport-relative units */
    width: 100vw;
}
<iframe></iframe>
Mở rộng đoạn trích

— khoa
nguồn
4

Các thử nghiệm sau đây làm việc

<iframe style="width:100%; height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" src="index.html" frameborder="0" height="100%" width="100%"></iframe>
— Uma Shankar Goel
nguồn
1
Có 14 câu trả lời khác đã ở đây. Bạn có thể giải thích làm thế nào câu trả lời của bạn tốt hơn hoặc ít nhất là khác với 14 người khác?
— Stephen Rauch
2

Bổ sung cho câu trả lời của Akshit Soota: đó là nhập và đặt rõ ràng chiều cao của từng phần tử cha, cũng của bảng và cột nếu có:

<body style="margin: 0px; padding:0px; height: 100%; overflow:hidden; ">
<form id="form1" runat="server" style=" height: 100%">
<div style=" height: 100%">


    <table style="width: 100%; height: 100%" cellspacing="0"  cellpadding="0">
        <tr>
            <td valign="top" align="left" height="100%">
                <iframe style="overflow:hidden;height:100%;width:100%;margin: 0px; padding:0px;" 
                        width="100%" height="100%" frameborder="0" scrolling="no"
                        src="http://www.youraddress.com" ></iframe> 
            </td>
— Brabbeldas
nguồn
2

Trước tiên bạn thêm css

html,body{
height:100%;
}

Đây sẽ là html:

 <div style="position:relative;height:100%;max-width:500px;margin:auto">
    <iframe src="xyz.pdf" frameborder="0" width="100%" height="100%">
    <p>Your browser does not support iframes.</p>
    </iframe>
    </div>
— Tariq Javed
nguồn
1

Đây là một mã ngắn gọn. Nó không dựa vào một phương pháp jquery để tìm chiều cao cửa sổ hiện tại. Khi tải iFrame, nó đặt chiều cao của iframe giống với cửa sổ hiện tại. Sau đó, để xử lý thay đổi kích thước của trang, thẻ body có trình xử lý sự kiện onresize đặt chiều cao của iframe bất cứ khi nào thay đổi kích thước tài liệu.

<html>
<head>
    <title>my I frame is as tall as your page</title>
     <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body onresize="$('#iframe1').attr('height', $(window).height());" style="margin:0;" >
    <iframe id="iframe1" src="yourpage.html" style="width:100%;"  onload="this.height=$(window).height();"></iframe>
</body>
</html>

đây là một mẫu làm việc: http://jsbin.com/soqeq/1/

— BraveNewMath
nguồn
0

Một cách khác để xây dựng toàn màn hình chất lỏng iframe:

Video nhúng lấp đầy toàn bộ viewport khu vực khi tải trang

Cách tiếp cận đẹp cho các trang đích có video hoặc bất kỳ nội dung nhúng nào. Bạn có thể có bất kỳ nội dung bổ sung nào bên dưới video nhúng, được tiết lộ khi cuộn trang xuống.

Thí dụ:

Mã CSS và HTML.

body {
    margin: 0;
    background-color: #E1E1E1;
}
header {
    width: 100%;
    height: 56vw;
    max-height: 100vh;
}
.embwrap {
    width: 100%;
    height: 100%;
    display: table;
}
.embwrap .embcell {
    width: auto;
    background-color: black;
    display: table-cell;
    vertical-align: top;
}
.embwrap .embcell .ifrwrap {
    height: 100%;
    width: 100%;
    display: inline-table;
    background-color: black;
}

.embwrap .embcell .ifrwrap iframe {
    height: 100%;
    width: 100%;
}
<header>
  <div class="embwrap">
    <div class="embcell">
      <div class="ifrwrap">
        <iframe webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" allowtransparency="true" scrolling="no" frameborder="0" width="1920" height="1440" src="http://www.youtube.com/embed/5SIgYp3XTMk?autoplay=0&amp;modestbranding=1&amp;iv_load_policy=3&amp;showsearch=0&amp;rel=1&amp;controls=1&amp;showinfo=1&amp;fs=1"></iframe>
      </div>
    </div>
  </div>
</header>
<article>
  <div style="margin:30px; text-align: justify;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem orci, rhoncus ut tellus non, pharetra consequat risus. </p>
    <p>Mauris aliquet egestas odio, sit amet sagittis tellus scelerisque in. Fusce in mauris vel turpis ornare placerat non vel purus. Sed in lobortis </p>
  </div>
</article>
Mở rộng đoạn trích

— DAH
nguồn
Xin lưu ý, bạn có thể cần một số javascript cho Firefox. Có một vấn đề phổ biến với chiều cao iframe trên Firefox.
— DAH
0

http://embedresponsively.com/

Đây là một tài nguyên tuyệt vời và đã hoạt động rất tốt, vài lần tôi đã sử dụng nó. Tạo mã sau ....

<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
— Tom Witherington
nguồn
0

Chỉ điều này làm việc cho tôi (nhưng cho "cùng tên miền"):

function MakeIframeFullHeight(iframeElement){
    iframeElement.style.width   = "100%";
    var ifrD = iframeElement.contentDocument || iframeElement.contentWindow.document;
    var mHeight = parseInt( window.getComputedStyle( ifrD.documentElement).height );  // Math.max( ifrD.body.scrollHeight, .. offsetHeight, ....clientHeight,
    var margins = ifrD.body.style.margin + ifrD.body.style.padding + ifrD.documentElement.style.margin + ifrD.documentElement.style.padding;
    if(margins=="") { margins=0;  ifrD.body.style.margin="0px"; }
    (function(){
       var interval = setInterval(function(){
        if(ifrD.readyState  == 'complete' ){
            iframeElement.style.height  = (parseInt(window.getComputedStyle( ifrD.documentElement).height) + margins+1) +"px";
            setTimeout( function(){ clearInterval(interval); }, 1000 );
        } 
       },1000)
    })();
}

bạn có thể sử dụng một trong hai: 

MakeIframeFullHeight(document.getElementById("iframe_id"));

hoặc là 

<iframe .... onload="MakeIframeFullHeight(this);" ....
— T.Todua
nguồn
0

Theo https://developer.mozilla.org/en-US/docs/Web/HTML/Euity/iframe , giá trị phần trăm không còn được cho phép. Nhưng sau đây làm việc cho tôi

<iframe width="100%" height="this.height=window.innerHeight;" style="border:none" src=""></iframe>

Mặc dù width:100%hoạt động, height:100%không hoạt động. Vì thếwindow.innerHeight đã được sử dụng. Bạn cũng có thể sử dụng pixel css cho chiều cao.

Mã làm việc: Liên kết Trang web làm việc: Liên kết

— Vishal
nguồn
0 
<iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">

</iframe>
— blueDexter
nguồn
0

Bạn có thể gọi một hàm sẽ tính toán cơ thể của iframe khi tải iframe:

<script type="text/javascript">
    function iframeloaded(){
       var lastHeight = 0, curHeight = 0, $frame = $('iframe:eq(0)');
       curHeight = $frame.contents().find('body').height();
       if ( curHeight != lastHeight ) {
           $frame.css('height', (lastHeight = curHeight) + 'px' );
       }
    }
</script>

<iframe onload="iframeloaded()" src=...>
— Tejpal Sharma
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.