-1
我的iframe有問題。在頂部有一個酒吧，左邊有一個用於放置HTML的textarea。我也有兩個textarea用於放置CSS和JS，但他們有display:none。然後，我想在左邊的一個iframe中，我可以看到我放入的所有東西的結果。但是，iframe是HTML文本區下的所有內容。我試圖改變我的iframe的位置，但是當我讓我的窗口變大時，它總是在其他地方。我將顯示我的所有代碼，因爲我可能在其他地方犯了一個錯誤。我的代碼管理器中的一個奇怪的地方我的iframe
<script>
var height=$(window).height()-40;
$(".codecontainer").height(height+"px");
</script><!doctype html>
<html>
<head>
<title>CodePlayer</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
\t <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
\t <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jqueryui.min.js"></script>
\t <style>
\t \t * {
\t \t \t \t font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
\t \t "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
\t \t \t \t margin:0;
\t \t \t \t padding:0;
\t \t }
\t \t \t \t
\t \t body, html {
\t \t \t \t height:100%;
\t \t \t \t width:100%;
\t \t }
\t \t #container {
\t \t \t \t height:100%;
\t \t }
\t \t \t \t
\t \t #titlebar {
\t \t \t width:100%;
\t \t \t background-color:#EEEEEE;
\t \t \t border-bottom:1px solid grey;
\t \t \t height:40px;
\t \t }
\t \t #title {
\t \t \t padding:10px 0 0 20px;
\t \t \t font-weight:bold;
\t \t \t float:left;
\t \t }
\t \t #menu {
\t \t \t margin:0 auto;
\t \t \t width:220px;
\t \t \t padding:5px;
\t \t }
\t \t
\t \t #menu ul {
\t \t \t border:1px solid grey;
\t \t \t border-radius:5px;
\t \t \t height:30px;
\t \t }
\t \t #menu li {
\t \t \t float:left;
\t \t \t list-style:none;
\t \t \t border-right:1px solid grey;
\t \t \t height:20px;
\t \t \t padding:5px 10px;
\t \t }
\t \t #menu li:hover {
\t \t \t background-color:grey;
\t \t }
\t \t #result{
\t \t \t position: relative;
\t \t \t top: -30px;
\t \t \t left: 153px;
\t \t \t border-right: 1px solid white;
\t \t }
\t \t #runButton{
\t \t \t float: right;
\t \t \t position: relative;
\t \t }
\t \t #run{
\t \t \t padding: 10px 15px 10px 15px;
\t \t \t border:none;
\t \t \t border-radius: 10px;
\t \t }
\t \t #run:hover{
\t \t \t background-color:grey;
\t \t }
\t \t .break {
\t \t \t clear:both;
\t \t }
\t \t .codecontainer{
\t \t \t width:49%;
\t \t \t float:left; \t \t
\t \t \t position:relative;
\t \t \t top: -24px;
\t \t \t height: 100%;
\t \t }
\t \t .codecontainer textarea{
\t \t \t width: 100%;
\t \t \t height: 100%;
\t \t \t border:none;
\t \t \t border-right: 1px solid grey;
\t \t \t font-family: monotype;
\t \t \t font-size: 120%;
\t \t \t padding:4px;
\t \t }
\t \t .codeLabel{
\t \t \t border:1px grey solid;
\t \t \t width: 50px;
\t \t \t position: absolute;
\t \t \t top: 20px;
\t \t \t right: 10px;
\t \t \t padding: 5px 5px 5px 5px;
\t \t \t border-radius: 5px;
\t \t }
\t \t #cssContainer, #jsContainer{
\t \t \t display: none;
\t \t }
\t \t iframe{
\t \t \t height: 100%;
\t \t \t width: 100%;
\t \t \t margin: 0;
\t \t \t float: left;
\t \t }
\t </style>
\t
</head>
<body>
\t <div id="container">
\t \t <div id="titlebar">
\t \t \t <div id="title">
\t \t \t \t \t CodePlayer
\t \t \t </div>
\t \t \t \t \t
\t \t \t <div id="runButton">
\t \t \t \t \t \t
\t \t \t \t \t <button id="run">Run</button>
\t \t \t \t \t
\t \t \t </div>
\t \t \t \t \t
\t \t \t <div id="menu">
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li>HTML</li>
\t \t \t \t \t \t <li>CSS</li>
\t \t \t \t \t \t <li>JS</li>
\t \t \t \t \t \t <li style="border:none" id="result">Result</li>
\t \t \t \t \t </ul>
\t \t \t </div>
\t \t \t \t \t
\t \t \t \t \t
\t \t \t \t \t
\t \t </div>
\t \t \t \t \t
\t \t <div class="break"></div>
\t \t \t \t \t
\t \t <div class="codecontainer" id="htmlContainer">
\t \t \t <span class="codeLabel">HTML</span>
\t \t \t <textarea>Example code</textarea>
\t \t <div class="codecontainer" id="cssContainer">
\t \t \t <span class="codeLabel">CSS</span>
\t \t \t <textarea>Example code</textarea>
\t \t \t \t \t
\t \t </div>
\t \t <div class="codecontainer" id="jsContainer">
\t \t \t <span class="codeLabel">JS</span>
\t \t \t <textarea>Example code</textarea>
\t \t \t \t \t
\t \t </div>
\t \t <div class="codecontainer" id="resultContainer">
\t \t \t <span class="codeLabel">Result</span>
\t \t \t <iframe></iframe>
\t \t \t \t \t
\t \t </div>
\t </div>
</body>
</html>
可以請你告訴我們你真正實現？你的問題不是很清楚。 –
對不起，這個錯誤。我希望我的iframe也是窗口的一半，在textarea旁邊放置HTML。 – RVDE
檢查我的答案 –