HTML/CSS : Set Breite & die Höhe des Objekts in ein div?

Habe ich lief in ein problem beim laden von html-Dateien in ein div-tag, mit dem code unten;

<div id ="content" ></div>
<script>
function load_home(){
    document.getElementById("content").innerHTML='<object type="text/html" data="home.html"></object>';
}
</script>

Das problem ist, dass der Inhalt geladen wird, wie unten zu sehen;
HTML/CSS : Set Breite & die Höhe des Objekts in ein div?

Den Inhalt füllt nicht die Höhe oder Breite des Bildschirms.

Irgendwelche Tipps für die Herstellung der geladenen html-Datei, füllen Sie den Körper, Breite und Höhe?

InformationsquelleAutor Snappiestjack | 2014-03-19
  1. 0

    Legen Sie die width-und height-Parameter, wenn der object-tag:

    ...
document.getElementById("content").innerHTML='<object type="text/html" data="home.html" style="width:100%; height: 100%;"></object>';
...

    edit:
    Mit Bezug auf die JSFiddle http://jsfiddle.net/zYw3S/12/ hinzufügen 

    #content{
    background-color: #FFFFFF;
    border-radius: 10px;
    margin-top: 10px;
    height: 70vh;
}
    • Ich habe nur Hinzugefügt, dass die Breite & Werte für die Höhe der geladene Inhalt füllt nun den gesamten body-Bereich, aber die Höhe ist immer noch Durcheinander.
    • Du sagst der Körper des Dokuments und nimmt nicht die Gesamtheit des Browsers? Ich denke, Sie werden brauchen, to post, etwas mehr von Ihrem Dokument. Als einfache doc wie diese: <html> <body onload="load_home()"> <div id ="content" ></div> <script> function load_home(){ document.getElementById("content").innerHTML='<object type="text/html" data="home.html" style="width:100%; height: 100%;"></object>'; } </script> </body> </html> füllen den Bildschirm
    • Das ist nicht der body-tag nicht die gesamte Seite, dass das Objekt-tag, das erzeugt wird, nimmt nicht die Breite oder Höhe der Seite. Ich glaube, ich habe es behoben, obwohl, durch das style="position: absolute; height: 100%".
    • Bearbeiten Sie diese! Was ich dachte, funktionierte nicht! Ich habe ein jsFiddle jsfiddle.net/zYw3S, in der home.html alles was da ist, ist ein Absatz-element mit der lorem ipsum text.
    • Okay, versuchen Sie dies: #content{ background-color: #FFFFFF; border-radius: 10px; margin-top: 10px; height: 70vh; } vh = View Höhe. Es ist ein Prozentsatz der vollen Ansicht-Bereich. Es unterscheidet sich von %, weil es nicht Berücksichtigung der übergeordneten container.
    • Danke Mann, das hinzufügen Höhe: ..vh;, funktioniert genau wie ich es war mit dem Ziel für 🙂

    InformationsquelleAutor AllenKll
  2. 0

    Versuchen, seine position: absolute; und top:0;left:0;bottom:0;right:0;width: 100%;height: 100%;

    InformationsquelleAutor Borys Generalov
  3. 0

    Warum ist der rechten Seite der div leer? Prüfen Sie, ob Sie sich beworben haben Breite Einschränkungen.
    Allerdings können Sie mit width:100% so, dass der div füllt das ganze Feld. Haben Sie vielleicht, um Ihr Skript in einem anderen div-Element und setzen Sie den Wert des div auf 100%.

    InformationsquelleAutor Susan
Schreibe einen Kommentar