我的iframe有问题。在顶部有一个酒吧，在左边我有一个textarea用于放入HTML。我也有两个textarea用于放入CSS和JS，但他们有display:none。然后我想在左边的一个iframe，我可以看到我放入的所有内容的结果。但iframe是HTML文本区域下的所有内容。我试图改变我的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" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jqueryui.min.js"></script>
<style>
* {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
margin:0;
padding:0;
}
body, html {
height:100%;
width:100%;
}
#container {
height:100%;
}
#titlebar {
width:100%;
background-color:#EEEEEE;
border-bottom:1px solid grey;
height:40px;
}
#title {
padding:10px 0 0 20px;
font-weight:bold;
float:left;
}
#menu {
margin:0 auto;
width:220px;
padding:5px;
}
#menu ul {
border:1px solid grey;
border-radius:5px;
height:30px;
}
#menu li {
float:left;
list-style:none;
border-right:1px solid grey;
height:20px;
padding:5px 10px;
}
#menu li:hover {
background-color:grey;
}
#result{
position: relative;
top: -30px;
left: 153px;
border-right: 1px solid white;
}
#runButton{
float: right;
position: relative;
}
#run{
padding: 10px 15px 10px 15px;
border:none;
border-radius: 10px;
}
#run:hover{
background-color:grey;
}
.break {
clear:both;
}
.codecontainer{
width:49%;
float:left;
position:relative;
top: -24px;
height: 100%;
}
.codecontainer textarea{
width: 100%;
height: 100%;
border:none;
border-right: 1px solid grey;
font-family: monotype;
font-size: 120%;
padding:4px;
}
.codeLabel{
border:1px grey solid;
width: 50px;
position: absolute;
top: 20px;
right: 10px;
padding: 5px 5px 5px 5px;
border-radius: 5px;
}
#cssContainer, #jsContainer{
display: none;
}
iframe{
height: 100%;
width: 100%;
margin: 0;
float: left;
}
</style>
</head>
<body>
<div id="container">
<div id="titlebar">
<div id="title">
CodePlayer
</div>
<div id="runButton">
<button id="run">Run</button>
</div>
<div id="menu">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li style="border:none" id="result">Result</li>
</ul>
</div>
</div>
<div class="break"></div>
<div class="codecontainer" id="htmlContainer">
<span class="codeLabel">HTML</span>
<textarea>Example code</textarea>
<div class="codecontainer" id="cssContainer">
<span class="codeLabel">CSS</span>
<textarea>Example code</textarea>
</div>
<div class="codecontainer" id="jsContainer">
<span class="codeLabel">JS</span>
<textarea>Example code</textarea>
</div>
<div class="codecontainer" id="resultContainer">
<span class="codeLabel">Result</span>
<iframe></iframe>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
错误在于您的html代码，即您的第一个codecontainer：
<div class="codecontainer" id="htmlContainer">
在以下内容之后没有关闭，所以它将所有其他div包含在其内部，将它们作为他们的子级div
<span class="codeLabel">HTML</span>
<textarea>Example code</textarea>
所以它应该是这样的：
<div class="codecontainer" id="htmlContainer">
<span class="codeLabel">HTML</span>
<textarea>Example code</textarea>
</div> <--- you have missed this closing tag for first "codecontainer"
使用此代码：
<!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" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jqueryui.min.js"></script>
<style>
* {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
margin:0;
padding:0;
}
body, html {
height:100%;
width:100%;
}
#container {
height:100%;
}
#titlebar {
width:100%;
background-color:#EEEEEE;
border-bottom:1px solid grey;
height:40px;
}
#title {
padding:10px 0 0 20px;
font-weight:bold;
float:left;
}
#menu {
margin:0 auto;
width:220px;
padding:5px;
}
#menu ul {
border:1px solid grey;
border-radius:5px;
height:30px;
}
#menu li {
float:left;
list-style:none;
border-right:1px solid grey;
height:20px;
padding:5px 10px;
}
#menu li:hover {
background-color:grey;
}
#result{
position: relative;
top: -30px;
left: 153px;
border-right: 1px solid white;
}
#runButton{
float: right;
position: relative;
}
#run{
padding: 10px 15px 10px 15px;
border:none;
border-radius: 10px;
}
#run:hover{
background-color:grey;
}
.break {
clear:both;
}
.codecontainer{
width:49%;
float:left;
position:relative;
top: -24px;
height: 100%;
}
.codecontainer textarea{
width: 100%;
height: 100%;
border:none;
border-right: 1px solid grey;
font-family: monotype;
font-size: 120%;
padding:4px;
}
.codeLabel{
border:1px grey solid;
width: 50px;
position: absolute;
top: 20px;
right: 10px;
padding: 5px 5px 5px 5px;
border-radius: 5px;
}
#cssContainer, #jsContainer{
display: none;
}
iframe{
height: 100%;
width: 100%;
margin: 0;
float: left;
}
</style>
</head>
<body>
<div id="container">
<div id="titlebar">
<div id="title">
CodePlayer
</div>
<div id="runButton">
<button id="run">Run</button>
</div>
<div id="menu">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li style="border:none" id="result">Result</li>
</ul>
</div>
</div>
<div class="break"></div>
<div class="codecontainer" id="htmlContainer">
<span class="codeLabel">HTML</span>
<textarea>Example code</textarea>
</div>
<div class="codecontainer" id="cssContainer">
<span class="codeLabel">CSS</span>
<textarea>Example code</textarea>
</div>
<div class="codecontainer" id="jsContainer">
<span class="codeLabel">JS</span>
<textarea>Example code</textarea>
</div>
<div class="codecontainer" id="resultContainer">
<span class="codeLabel">Result</span>
<iframe></iframe>
</div>
</body>
</html>