Contenteditable предел высоты div

Question

Contenteditable предел высоты div

Эй, ребята, у меня проблемы с приемлемым ростом. С таким кодом:

 function Preview() {
var x = document.getElementById("code").value;
document.getElementById("preview").innerHTML = x;
}

  .preview{
text-align: left;
color: white;
margin-left: 10px;
max-height: 300px;
overflow: auto;
}

<section id="main">
<div id="gra">
<input type="hidden" id="current-code" name="current-code" />
<textarea id="code" name="code">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A Simple PHP File</title>
</head>
<body>
<h1><?php echo "Hello, world!"; ?></h1>
</body>
</html>
</textarea>
<div class="flex">
<a href="#" class="myButton" onclick="Preview()">Preview</a>
<a href="#" class="myButton" onclick="Reset()">Reset</a>
</div>
</div>
<div id="gra">
<div contenteditable="true" class="preview" id="preview">
</div>
</div>
</section>

1

contenteditable css html5 php

Решение

По вопросам рекламы [email protected]

Accepted Answer

попробуй этот код

а также изменить color: red; вместо color:white потому что его ничего не видно на белом экране

function Preview() {

var x = document.getElementById("code").value;
document.getElementById("preview").innerHTML = x;
}

function Reset() {
document.getElementById("preview").innerHTML = "";
}

.preview {
text-align: left;
color: red;
margin-left: 10px;
max-height: 300px;
overflow-y: scroll;
border: solid 1px #ddd;
}

<section id="main">
<div id="gra">
<input type="hidden" id="current-code" name="current-code" />
<textarea id="code" name="code">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A Simple PHP File</title>
</head>
<body>
<h1><?php echo "Hello, world!"; ?>you write php code hear so it will not print on html</h1>
</body>
</html>
</textarea>
<div class="flex">
<a href="#" class="myButton" onclick="Preview()">Preview</a>
<a href="#" class="myButton" onclick="Reset()">Reset</a>
</div>
</div>
<div id="gra">
<div contenteditable="true" class="preview" id="preview">
</div>
</div>
</section>

1

Другие решения

Других решений пока нет …

Источник