< >

textdatei-in-div-darstellen-hohe-passt-sich-nicht-an.php


Quell Code


<!doctype html>
  <html lang="de">
    <head>
<style>
*{
     margin:0;
     padding:0
}
body{
     height:100%;
     width:100%;
     display:flex;
     flex-direction:column;
}
.zuzr_demo{
     width:80%;
     min-height:150px;
     height:auto;
     border-radius:20px;
     padding:15px;
     border:2px solid green;
}
.ob{
     width:100%;  
     border:2px solid grey;
}    
.red{
    color:red;
    font-size:20px;    
}
.green{
    color:green;
    font-size:20px;
}
</style>
</head>
<body>
<h2>Ohne Javascript und nur mit css</h2>
<?php
if(isset($_POST['feld1'])){
    $inhalt1=$_POST['feld1'];
    file_put_contents('testdatei.html',$inhalt1);
        echo "Text feld 1 geändert";
}   
?>    
<form method="POST">
<label>Lade einen längeren oder kürzeren Text</label><br>
<form>
<textarea name="feld1">
<?php
     include('testdatei.html');
?>
</textarea><br>
<input type="Submit" value="Neuen Text neu laden"><br>
</form>
<div class="zuzr_demo" id="wrapper1">
     <object class="ob" id="obj_dateilesen1" data="testdatei.html" type="text/html"></object>
</div>
<hr><hr>
<h2>Hier mit Javascript</h2>
<?php
if(isset($_POST['feld2'])){
    $inhalt2=$_POST['feld2'];
    file_put_contents('testdatei2.html',$inhalt2);
    echo "Text feld 2 geändert";
}   
?> 
<form method="POST">
<label>Lade einen längeren oder kürzeren Text</label><br>
<form>
<textarea name="feld2">
<?php
     include('testdatei2.html');
?>
</textarea><br>
<input type="Submit" value="Neuen Text neu laden"><br>
</form>
<div class="zuzr_demo" id="wrapper2">
     <object class="ob" id="obj_dateilesen2" data="testdatei2.html" type="text/html"></object>
</div>

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