Question

嘿伙计们，我有高低的问题。使用这样的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

当我输入更多代码时，我可以观察到这样的效果：

任何人都可以帮助我限制满足的高度？

Answer 1

试试这段代码

并且还更改color: red;而不是color:white，因为它在白色屏幕上看不到任何内容

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

可信的div高度限制

1 个答案: