Textdatei in DIV darstellen - Höhe passt sich nicht an

  • Hallo,


    ich bringe die Darstellung einer eingelesenen Textdatei nicht hin. Das Einlesen klappt mit dem Script einwandfrei einschließlich aller Formatierungen. Das Objekt wird in einem Container-DIV dargestellt. Solange ich feste Höhen vorgebe, werden diese realisiert. Mit der Angabe „auto“ bleibt die Höhe aber bei etwa 150 Pixel, egal wie viel Text eingelesen wurde. Ein Scrollbalken wird dargestellt.

    Ich nutze HTML, CSS und ein abgeschriebenes JavaScript auf einem PC mit Windows 10 und Firefox.

    Wie kann eine „Auto-Funktion“ realisiert werden?

    Ist das ein CSS-Problem oder muss ich in eine anderes Forum?



    #wrapper {

    height:auto;

    margin-left:auto;

    margin-right:auto;

    }


    #div_textanzeigen {

    min-height: 100%

    margin-left:auto;

    margin-right:auto;

    margin-bottom: 0;

    }


    #obj_dateilesen {

    min-height:101%;

    margin-left:auto;

    margin-right:auto;

    margin-bottom: 0;

    }

    </style>

    </head>


    <body>

    <div id="wrapper">


    <div id="div_textanzeigen">

    <!-- Jetzt folgt das Einlesen des Textes:-->

    <object id="obj_dateilesen" data="testdatei.html" type="text/html"></object>


    <script>

    window.onload = function () {

    var object = document.querySelector('.text');

    var doc = object.contentDocument;

    doc.documentElement.style.overflow = 'hidden';

    doc.body.style.overflow = 'hidden';


    var contentsHeight = doc.documentElement.offsetHeight;

    object.height = contentsHeight;

    }

    </script>


    </div>

    <!-- Hier endet die Hülle-->

    </div>


    Danke fürs Durchlesen.

  • Fehlt da irgendwas ?

    kann class name text nicht sehen..


    Wie willst du das den jetzt haben ?

    So das alles lesbar ist und keine Scrollbalkern mehr da sind , oder auf eine bestimmter feste größe festsetzten

  • Der gesamte Text soll lesbar sein ohne Scrollbalken. Height auf auto oder 100% zu stellen, hat mir nichts gebracht.

    Hintergrund ist, dass der Text änderbar sein soll, ohne dass die HTML-Datei angefasst wird. Das Einlesen und Darstellen (allerdings mit Scrollbalken) funktioniert problemlos ohne weitere Klassendefinition.

  • Dann nutze das Javascript was du da schon hast

    Das "contentsHeight " sollter die höhe des Inhalts sein.

    dann

    document.getElementById('obj_dateilesen').style.height=contentsHeight+'px';


    aber ändere vorher das

    var object = document.querySelector('.text');

    in das

    var object = document.querySelector('#obj_dateilesen');



    So ungefähr sollte es dann auch klappen.

    Bin gerade Mobil unterwegs und wenn ich zuhause bin dann kann ich dir das genauer sagen weil auf Handy läßt sich das schwer testen


    So sollte es gehen

    Code
    <script>
    window.onload = function () {
    var object = document.querySelector('#obj_dateilesen');
    var doc = object.contentDocument;
    var contentsHeight = doc.documentElement.offsetHeight;
    object.height = contentsHeight;
    }
    </script>

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!