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>