238

সমস্ত ব্রাউজারে iframe উচ্চতা = 100% সমর্থিত?

আমি ডক্টাইপ হিসাবে এটি ব্যবহার করছি:

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

আমার iframe কোডে, যদি আমি বলি:

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

আমার অর্থ এটি কী বাকী পৃষ্ঠের উচ্চতাটি গ্রহণ করবে (50px এর স্থির উচ্চতা সহ শীর্ষে অন্য ফ্রেম রয়েছে) এটি কি সমস্ত বড় ব্রাউজারগুলিতে (আইই / ফায়ারফক্স / সাফারি) সমর্থিত?

স্ক্রোলবারগুলি সম্পর্কেও, যদিও আমি বলি scrolling="no", আমি ফায়ারফক্সে অক্ষম স্ক্রোলবার দেখতে পাচ্ছি ... আমি কীভাবে সম্পূর্ণরূপে স্ক্রোলবারগুলি আড়াল করব এবং স্বয়ংক্রিয়ভাবে আইফ্রেমের উচ্চতা সেট করব?

— testndtv
সূত্র

14

দেখুন আমার কাছে সমস্ত ব্রাউজার ইনস্টল করা

— নেই..এছাড়াও

1

আপনি এটি একটি সিএসএস যাচাইকারীতে চেষ্টা করে দেখতে পারেন।

— রুবেন

6

হ্যাঁ, এটি কোনও ত্রুটি / সতর্কতা দেয় না ... তবে আমার প্রশ্নটি কি সমস্ত ব্রাউজারগুলি আসলে 100% উচ্চতা প্রয়োগ করে?

— testndtv

আমার জন্য এই উত্তরটি

— ঠিকঠাকভাবে

275

আপনি পূর্ববর্তী উত্তরগুলিতে ফ্রেমসেটটি ব্যবহার করতে পারেন তবে আপনি যদি আইফ্রেমগুলি ব্যবহারে জেদী হন তবে নীচের দুটি উদাহরণের কাজ করা উচিত:

<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>

একটি বিকল্প:

<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>

উপরোক্ত 2 টি বিকল্পের সাথে স্ক্রলিংটি আড়াল করতে:

<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>

দ্বিতীয় উদাহরণ সহ হ্যাক:

<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>

আইফ্রেমের স্ক্রোল বারগুলি আড়াল করার জন্য পিতামাতাকে overflow: hiddenস্ক্রোলবারগুলি আড়াল করার জন্য তৈরি করা হয় এবং আইফ্রেমে 150% প্রস্থ এবং উচ্চতা পর্যন্ত তৈরি করা হয় যা পৃষ্ঠার বাইরের স্ক্রোল বারগুলিকে বাধ্য করে এবং যেহেতু শরীরে স্ক্রোল বার নেই doesn't কেউ আশা করতে পারে না যে iframe পৃষ্ঠার সীমা অতিক্রম করবে। এটি পুরো প্রস্থ সহ আইফ্রেমের স্ক্রোলবারগুলি গোপন করে!

— কুঠার
সূত্র

3

ভাল লাগছে .. তবে একটি প্রশ্ন যদিও ... আমাদের স্টাইল = কেন প্রয়োজন "উচ্চতা: 100%; প্রস্থ: 100%;" যখন আমরা যাইহোক যাইহোক iframe উচ্চতা = "100%" প্রস্থ = "100%"

— বলছি

1

এছাড়াও কেবল আইই 100% উচ্চতা নিচ্ছে না (200px এইচটি প্রায় লাগে) ... এফএফ এবং

— সাফরি

@ বোরিস জবারস্কি হ্যাঁ, আমাকে তা জানানোর জন্য ধন্যবাদ! আমি পোস্টটি এখনই আপডেট করেছি !! @hmthr ডাবল ট্যাগ সম্পর্কিত আপনার প্রথম প্রশ্নটি হ'ল কারণ আগের ব্রাউজারগুলি "উচ্চতা" এবং "প্রস্থ" ট্যাগ নেয় তবে স্টাইল ট্যাগগুলির সাথে ভালভাবে কাজ করে না! আইআই বাগ সম্পর্কে, আমি আপনাকে এই ক্ষেত্রে প্রথম কোডটি বজায় রাখতে পছন্দ করব।

— এক্স

15

আইফ্রেমে সঠিকভাবে 100% ব্যবহার করতে পিতামাতার 100% হওয়া দরকার। আরও নতুন ডকুমেন্টে এইচটিএমএল এবং বডি ট্যাগ স্বয়ংক্রিয়ভাবে 100% হয় না। যখন আমি উচ্চতা যুক্ত করেছি: এইচটিএমএল এবং শরীরের জন্য 100% তখন এটি নির্দোষভাবে কাজ করে। সুতরাং, আমি মনে করি, প্রশ্নের সঠিক উত্তরটি রুডি থেকে দেওয়া উত্তর, আমার এক্সএইচটিএমএল ডক্টাইপটি বাদ দিয়ে। এছাড়াও লক্ষ করুন যে ওভারফ্লো নিয়মগুলি তখন প্রয়োজনীয় নয়। স্ক্রোলবারগুলি তারপরে - স্বয়ংক্রিয়ভাবে হিসাবে কাজ করে।

— সর্পিলিস

3

এই এসও উত্তরটিও খুব ছোট এবং সুন্দর।

— উওয়ে কেইম

164

পূর্ণস্ক্রিন তৈরির জন্য 3 টি পদ্ধতি `iframe`:

পদ্ধতির 1 - ভিউপোর্ট-শতাংশ দৈর্ঘ্য

ইন সমর্থিত ব্রাউজারে , আপনি ব্যবহার করতে পারেন ভিউপোর্ট-শতাংশ লেন্থ যেমন height: 100vh।

যেখানে 100vhভিউপোর্টের উচ্চতা উপস্থাপন করে এবং তেমনিভাবে 100vwপ্রস্থকেও উপস্থাপন করে।

উদাহরণ এখানে
```
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>
```
স্নিপেট প্রসারিত করুন

পদ্ধতির 2 - স্থির অবস্থান

এই পদ্ধতির মোটামুটি সোজা-এগিয়ে। শুধু এর অবস্থান নির্ধারণ করুনfixed উপাদান এবং যোগ height/ widthএর 100%।

উদাহরণ এখানে
```
iframe {
    position: fixed;
    background: #000;
    border: none;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 100%;
    height: 100%;
}
```
```
<iframe></iframe>
```
স্নিপেট প্রসারিত করুন

পদ্ধতির ঘ

এই শেষ পদ্ধতি জন্য, শুধু সেট heightএর body/html / iframeউপাদানগুলির100% ।

উদাহরণ এখানে

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>

স্নিপেট প্রসারিত করুন

— জোশ ক্রোজিয়ার
সূত্র

4

আমি বিকল্প 1 এর বিভিন্নতা ব্যবহার করে শেষ করেছি ... আমি প্রস্থ: 100% এবং উচ্চতা: 100vh ব্যবহার করেছি কারণ যে উত্সটি আমি টানছিলাম তা বেশ প্রশস্ত ছিল এবং iframe একটি ডিভের মধ্যে রয়েছে। দুর্দান্ত সমাধান। ধন্যবাদ.

— নটজাই

2

display: blockডাবল-স্ক্রোলবারটি আটকাতে কৌশলটি যোগ করে

— কেভেনজি

45

1. আপনার ডক্টইপিকে কম কড়া কিছুতে পরিবর্তন করুন। এক্সএইচটিএমএল ব্যবহার করবেন না; এটা নির্বোধ। এইচটিএমএল 5 ডক্টিপ ব্যবহার করুন এবং আপনি ভাল:

<!doctype html>

২. আপনাকে অবশ্যই নিশ্চিত করতে হবে (ব্রাউজারের উপর নির্ভর করে) যে আইফ্রেমের পিতামাতার উচ্চতা রয়েছে। এবং এর পিতামাতা। এবং এর পিতামাতা। ইত্যাদি

html, body { height: 100%; }

— Rudie
সূত্র

9

আমার জন্য এখানে গুরুত্বপূর্ণ অংশটি ছিল যে এইচটিএমএল এবং বডি ট্যাগের উচ্চতা প্রয়োজন: 100%। ধন্যবাদ।

— সর্পিলিস

1

শুধু বডি সেট করা Chrome এ কাজ করে তবে অন্যান্য ব্রাউজারগুলিতে নয়।

— ডিংল

এখানে 2 বিকল্প দৃষ্টিভঙ্গী হয় ।

— জোশ ক্রোজিয়ার

36

আমি একই সমস্যা মধ্যে দৌড়ে, আমি একটি ডিভ মধ্যে একটি iframe টান ছিল। এটা চেষ্টা কর:

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

উচ্চতা 100vh এ সেট করা হয়েছে যা ভিউপোর্টের উচ্চতার জন্য দাঁড়িয়েছে। এছাড়াও, প্রস্থটি 100 ভিডব্লুতে সেট করা যেতে পারে, যদিও উত্স ফাইলটি প্রতিক্রিয়াশীল হলে আপনার সমস্যাগুলি সম্ভবত ছড়িয়ে পড়বে (আপনার ফ্রেমটি খুব প্রশস্ত হবে)।

— NotJay
সূত্র

3

যতদূর আমি জানি কোনও ব্রাউজারে বিজোড় সমর্থিত নয়

— ভিজ্যুয়ালবিয়ান

1

আমি এই সমস্যাটির সাথে ফিরিয়ে দেওয়ার জন্য যত্ন নেওয়ার চেয়ে বেশি সময় ব্যয় করার পরে, আমার যা প্রয়োজন তা হ'ল এটি ঠিক। ওয়েবসাইটের পরিবর্তে আমি অন্য একটি এইচটিএমএল ফাইল ব্যবহার করেছি, যার জন্য ভিউপোর্টের উচ্চতার একটি সামান্য সমন্বয় প্রয়োজন এবং এখন এটি ভাল to ধন্যবাদ!

— থমাস জ্যাকবস

29

এটি আমার পক্ষে খুব সুন্দরভাবে কাজ করেছে (কেবলমাত্র যদি iframe সামগ্রী একই ডোমেন থেকে আসে ):

<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>

— ইভান
সূত্র

21

এটি কেবল তখনই কাজ করবে যদি iframe srcপ্যারেন্ট পৃষ্ঠার একই ডোমেনে থাকে, অন্যথায় আপনি অনুমতি ছাড়াই ত্রুটি পেয়ে যাবেন contentWindow.document।

— wolfyuk

ওয়ার্ডপ্রেসের ভিতরে এই কাজটি করার জন্য কিছুটা সময় নিয়েছি, আমি আমার প্লাগইনে একটি শর্টকোড যুক্ত করেছি। একটি যাদুমন্ত্র মত কাজ করে.

— অ্যান্ডি

এটা কাজ করে। তবে সমস্যাটি হ'ল এটি প্রতিটি অভ্যন্তরীণ iframe পোস্টব্যাকের উপরের উচ্চতা পুনরায় গণনা করা হবে না। কোন workaround আছে?

— 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>

স্নিপেট প্রসারিত করুন

— Khoa
সূত্র

6

<iframe src="" style="top:0;left: 0;width:100%;height: 100%; position: absolute; border: none"></iframe>

— হিটার গিয়াকোমিনি
সূত্র

4

নিম্নলিখিত পরীক্ষিত কাজ

<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>

— উমা শঙ্কর গোয়েল
সূত্র

1

ইতিমধ্যে এখানে আরও 14 টি উত্তর রয়েছে। আপনার উত্তর কীভাবে ভাল বা অন্য 14 টির চেয়ে কমপক্ষে আলাদা তা আপনি ব্যাখ্যা করতে পারেন?

— স্টিফেন রাউচ

2

অক্ষিত সোটার উত্তরের অতিরিক্ত: এটি প্রতিটি প্যারেন্ট উপাদানগুলির উচ্চতা সুস্পষ্টভাবে সারণী এবং কলামের নির্দিষ্ট করে সেট করতে আমদানি হয় :

<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
সূত্র

2

আপনি প্রথমে সিএসএস যুক্ত করুন

html,body{
height:100%;
}

এটি এইচটিএমএল হবে:

 <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>

— তারিক জাভেদ
সূত্র

1

একটি সংক্ষিপ্ত কোড এখানে। এটি বর্তমান উইন্ডোটির উচ্চতা সন্ধান করার জন্য একটি jquery পদ্ধতির উপর নির্ভর করে। আইফ্রেমের লোডে এটি বর্তমান উইন্ডোটির মতোই iframe এর উচ্চতা নির্ধারণ করে। তারপরে পৃষ্ঠার আকার পরিবর্তন করতে পরিচালনা করতে, বডি ট্যাগটিতে একটি অনারসাইজ ইভেন্ট হ্যান্ডলার থাকে যা যখনই ডকুমেন্টকে পুনরায় আকার দেওয়া হয় তখন আইফ্রেমের উচ্চতা নির্ধারণ করে।

<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>

এখানে একটি কার্যকারী নমুনা: http://jsbin.com/soqeq/1/

— BraveNewMath
সূত্র

0

তরল পূর্ণ পর্দা তৈরি করার আরেকটি উপায় `iframe`:

এম্বেড থাকা ভিডিও `viewport`পৃষ্ঠা লোড হওয়ার পরে পুরো অঞ্চল পূরণ করে

ভিডিও বা কোনও এম্বেড থাকা সামগ্রী সহ পৃষ্ঠাগুলি অবতরণ করার জন্য দুর্দান্ত পন্থা। এম্বেড থাকা ভিডিওর নীচে আপনার অতিরিক্ত কোনও সামগ্রী থাকতে পারে, যা পৃষ্ঠাটি স্ক্রোল করার সময় প্রকাশিত হয়।

উদাহরণ:

সিএসএস এবং এইচটিএমএল কোড।

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>

স্নিপেট প্রসারিত করুন

— Dah
সূত্র

দয়া করে নোট করুন, আপনার ফায়ারফক্সের জন্য কিছু জাভাস্ক্রিপ্টের প্রয়োজন হতে পারে। ফায়ারফক্সে iframe উচ্চতা নিয়ে সাধারণ সমস্যা রয়েছে।

— ডিএএইচ

0

http://embedresponsively.com/

এটি একটি দুর্দান্ত সংস্থান এবং খুব ভাল কাজ করেছে, আমি কয়েকবার এটি ব্যবহার করেছি। নিম্নলিখিত কোড তৈরি করে ....

<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>

— টম উইয়ারিংটন
সূত্র

0

এটি কেবল আমার জন্য কাজ করেছে (তবে "একই ডোমেন" এর জন্য):

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)
    })();
}

আপনি যে কোনটি ব্যবহার করতে পারেন:

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

অথবা

<iframe .... onload="MakeIframeFullHeight(this);" ....

— T.Todua
সূত্র

0

অনুযায়ী https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe , শতকরা মান আর অনুমতি দেওয়া হয়। তবে নিম্নলিখিতগুলি আমার পক্ষে কাজ করেছিল

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

যদিও width:100%কাজ করে, কাজ height:100%করে না। তাই window.innerHeightব্যবহার করা হয়েছে। আপনি উচ্চতার জন্য সিএসএস পিক্সেলও ব্যবহার করতে পারেন।

কাজের কোড: লিঙ্ক কার্যকারী সাইট: লিঙ্ক

— অগ্নেল বিশাল
সূত্র

0

<iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">

</iframe>

— blueDexter
সূত্র

0

আপনি কোনও ফাংশন কল করতে পারেন যা iframe লোড হওয়ার পরে 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=...>

— তেজপাল শর্মা
সূত্র

100% উচ্চতা সহ পূর্ণ-স্ক্রিন iframe

পূর্ণস্ক্রিন তৈরির জন্য 3 টি পদ্ধতি iframe:

পদ্ধতির 1 - ভিউপোর্ট-শতাংশ দৈর্ঘ্য

পদ্ধতির 2 - স্থির অবস্থান

পদ্ধতির ঘ

তরল পূর্ণ পর্দা তৈরি করার আরেকটি উপায় iframe:

এম্বেড থাকা ভিডিও viewportপৃষ্ঠা লোড হওয়ার পরে পুরো অঞ্চল পূরণ করে

উদাহরণ:

পূর্ণস্ক্রিন তৈরির জন্য 3 টি পদ্ধতি `iframe`:

তরল পূর্ণ পর্দা তৈরি করার আরেকটি উপায় `iframe`:

এম্বেড থাকা ভিডিও `viewport`পৃষ্ঠা লোড হওয়ার পরে পুরো অঞ্চল পূরণ করে