iframeは高さで自動サイズ変更可能

ギャラリーには反応性がありますが、ギャラリーが挿入されているiframeに問題があります。高さが自動的には適用されず、ページに縦スクロールが表示されますiframeタグやhtmlページsrcでのみ高さを設定してiframeのサイズを変更できますか？iframeは高さで自動サイズ変更可能

マイコード： gallery.html：

<body> 
<div class=""> 

    <div class="galleryItem"> 
     <a href="" class=""><img src="http://i.imgur.com/jeUxtJG.jpg" alt="" /></a> 
     <h3>Title</h3> 
     <p>description of whatever</p> 
    </div> 

    <div class="galleryItem"> 
     <a href="" class=""><img src="http://i.imgur.com/jeUxtJG.jpg" alt="" /></a> 
     <h3>Title</h3> 
     <p>description of whatever</p> 
    </div> 

    <div class="galleryItem"> 
     <a href="" class=""><img src="http://i.imgur.com/jeUxtJG.jpg" alt="" /></a> 
     <h3>Title</h3> 
     <p>description of whatever</p> 
    </div> 

    <div class="galleryItem"> 
     <a href="" class=""><img src="http://i.imgur.com/jeUxtJG.jpg" alt="" /></a> 
     <h3>Title</h3> 
     <p>description of whatever</p> 
    </div> 

</div> 
</div> 
</body>

CSS：

* { 
    padding: 0; 
    margin: 0; 
} 

/*GALLERY STYLES*/ 
.galleryItem { 
    color: #797478; 
    font: 10px/1.5 Verdana, Helvetica, sans-serif; 
    width: 60%; 
    margin: 2% 2% 50px 2%; 
    float: left; 
    -webkit-transition: color 0.5s ease; 
} 

.galleryItem h3 { 
    text-transform: uppercase; 
    line-height: 2; 
} 

.galleryItem:hover { 
    color: #000; 
} 

.galleryItem img.js-tagged-image { 
    max-width: 100%; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
} 
/* MEDIA QUERIES*/ 
@media only screen and (max-width : 940px), 
only screen and (max-device-width : 940px){ 
    .galleryItem {width: 60%;} 
} 

@media only screen and (max-width : 720px), 
only screen and (max-device-width : 720px){ 
    .galleryItem {width: 60%;} 
} 

@media only screen and (max-width : 530px), 
only screen and (max-device-width : 530px){ 
    .galleryItem {width: 60%;} 
} 

@media only screen and (max-width : 320px), 
only screen and (max-device-width : 320px){ 
    .galleryItem {width: 96%;} 
    .galleryItem img {width: 96%;} 
    .galleryItem h3 {font-size: 18px;} 
    .galleryItem p, .header p {font-size: 18px;} 
}

インラインフレーム：

<iframe frameborder="0" src="url/gallery.html" style="border: none; overflow:hidden; max-width: 1026px;" width="100%"></iframe>

画像結果はiframe：

出典

2016-10-25 Pedro

iframeはコンテンツサイズに基づいて高さや幅を自動的に設定することはできませんでした。コンテンツに合うように自動的にサイズを設定する必要がある場合は、javascriptを使用して "galleryItem" divをループし、最も高いdivを見つけて、他のコンテンツの高さ、パディング、マージン、およびJavaScriptをiframeの高さに変更してください。 – Krik

あなたはそれを見ましたか？ http://stackoverflow.com/a/362564/3967385 – mlbd

残念ながら、簡単に行うことはできません。あなたはhttp://davidjbradshaw.github.io/iframe-resizer/を使用することができ、私はお勧めする小さな図書館があります。（私は貢献したバグ修正を除いて、何らかの方法でそれに関係していません）

出典

2016-10-26 22:22:21 elektronik

iframeは高さで自動サイズ変更可能

答えて

関連する問題