html Iframe erreicht nicht unten im Fenster

Ich versuche, eine Webseite mit drei horizontalen Abschnitten zu erstellen - eine Kopfzeile, ein Menü und einen Inhaltsabschnitt. Mein Problem ist, dass wenn ich das tue, der untere iframe nicht in der Nähe des unteren Randes des Browserfensters kommt. Ich frage mich, ob mir jemand sagen kann, was ich falsch mache. Mein HTML sieht so aus:html Iframe erreicht nicht unten im Fenster

<!DOCTYPE html> 
<html> 
<head> 
<style> </style> 
</head> 
<body> 
<iframe src="title.htm" width="100%" height=90 
    style=" position:absolute; 
      top:0; left:0; 
      border:1px solid grey;" 
    name="title_frame"> 
    <p>Your browser does not support iframes</p> 
</iframe> 
<iframe src="hmenu.htm" width="100%" height=70 
    style=" position:absolute; 
      top:90px; 
      left:0; 
      border:1px solid grey; 
      margin:0px 0px 0px 0px;" 
    name="hmenu_frame"> 
</iframe> 
<iframe src="startpage.htm" width="100%" height="100%" 
    style=" position:relative; 
      top:160px; 
      vertical-align:bottom; 
      border:1px solid grey;" 
    name="content_frame"> 
</iframe> 
</body> 
</html>

Es gibt keine CSS-Includes. Ich sehe eine Vorschau mit Chrome und das Ende des letzten Iframes befindet sich ungefähr auf halber Höhe des Fensters. Ich habe versucht, absolute Position zu verwenden, mit Höhe zu spielen, und versuchte eine vertikale Ausrichtung: unten, aber nichts davon scheint zu funktionieren.

Quelle

2016-10-31 user2766918

iframes für verschiedene Seitenbereiche zu verwenden ist ... nicht der beste Weg. Warum nicht einfach '

' Tags verwenden? – andreas

Danke. Ich hatte vorher noch nie von Sektionen gehört. Ich habe gerade eine kurze Suche durchgeführt, und es scheint nicht, dass dieser Abschnitt ein src-Attribut unterstützt. Wenn ich also auf einen Menüpunkt klicke, kann der Inhalt des Abschnitts geladen werden, ohne die gesamte Seite neu zu laden. (Beachten Sie, dass im Menü einige Javascript-Befehle angezeigt werden. Daher würde ich es vorziehen, sie nicht neu zu laden, es sei denn, dies ist absolut notwendig). – user2766918

Ok, ich verstehe. Bei der Verwendung von Sektionen müssen Sie den gesamten Code in einer HTML-Datei verwenden. Das erneute Laden nur eines Abschnitts mit einem Menüelementklick funktioniert nicht. Sehen Sie sich diese Frage an, ob es eine schlechte Übung ist, iframes zu verwenden: http://stackoverflow.com/questions/362730/are-iframes-considered-bad-practice – andreas

Ich schlage vor, ein bisschen Ihren Ansatz zu ändern. Dies kann leicht mit flexbox erreicht werden. Bitte beachten Sie, dass die Verwendung von iframes in Ihrem Kontext nicht wirklich empfohlen wird. Sie können das Endergebnis in this fiddle sehen.

Zuerst entfernen Sie die relative und absolute Positionierung von Ihrem iframe s. Sie werden nicht benötigt. Als nächstes setzen Sie display: flex; flex-direction: column; auf body. Da Sie Grenzen festlegen (und weil Sie dadurch eine Menge Ärger ersparen könnten), fügen Sie box-sizing: border-box; auf Ihrer iframe s hinzu.

html, body { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 

body { 
    display: flex; 
    flex-direction: column; 
} 

iframe { 
    box-sizing: border-box; 
}

Quelle

2016-10-31 12:38:46

Sie sind die zweite Person, die sagte, dass iframes in dem Kontext nicht empfohlen wird. Könntest du das weiter erläutern? (Entschuldigung, wie ich schon sagte, ich bin neu und lerne, während ich gehe - ich würde gerne die Argumentation verstehen). – user2766918

Sie können viele Ressourcen im Internet bezüglich der Verwendung von iframes finden. Das größte Problem, das Sie hören werden, ist Sicherheit. Ein anderer Grund wäre "Semantik". Sie sollten versuchen, das beste Element zu verwenden, das den Inhalt beschreibt (deshalb empfahl @Andreas 'Sektionen'). Ein "iframe" hat keine "Bedeutung", es "injiziert" nur Code in Ihre Seite. –

Hier ist eine einfache Lösung display: flex; und <section> Tags anstelle von Iframes verwenden. Breite Sie stellen sicher, dass Ihre Inhaltsbereiche übereinander, nicht in einer Reihe angezeigt werden.

Auf diese Weise brauchen Sie nicht alle Positionierung, die Sie tun, und Ihre Markup sowie Ihre Stile bleiben sauber und einfach.

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
section { 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    border: 1px solid grey; 
 
} 
 
.title { 
 
    height: 90px; 
 
} 
 
.hmenu { 
 
    height: 70px; 
 
} 
 
.content { 
 
    height: 100%; 
 
}

<section class="title">...</section> 
 
<section class="hmenu">...</section> 
 
<section class="content">...</section>

Quelle

2016-10-31 12:44:21 andreas

html Iframe erreicht nicht unten im Fenster

Antwort

Verwandte Themen