Javascript 我的iframe在代码播放器中的一个奇怪位置
我的iframe有问题。在顶部有一个栏，在左边我有一个文本区域，用于输入HTML。我还有两个textarea用于输入CSS和JS，但它们有Javascript 我的iframe在代码播放器中的一个奇怪位置,javascript,jquery,html,css,iframe,Javascript,Jquery,Html,Css,Iframe,我的iframe有问题。在顶部有一个栏，在左边我有一个文本区域，用于输入HTML。我还有两个textarea用于输入CSS和JS，但它们有display:none。然后我想在左边有一个iframe，在那里我可以看到我输入的所有内容的结果。但是iframe是HTML文本区域下的所有内容。我试图改变我的iframe的位置，但是当我把我的窗口变大时，它完全是在另一个地方。我将展示我所有的代码，因为我可能在其他地方犯了错误 变量高度=$（窗口）.height（）-40； $（“.codecontai
display:none
变量高度=$（窗口）.height（）-40；
$（“.codecontainer”）.height（height+“px”）；
代码播放器
* {
字体系列：“HelveticaNeue灯”、“Helvetica Neue灯”，
“Helvetica Neue”，Helvetica，Arial，“Lucida Grande”，无衬线；
保证金：0；
填充：0；
}
正文，html{
身高：100%；
宽度：100%；
}
#容器{
身高：100%；
}
#标题栏{
宽度：100%；
背景色：#EEEEEE；
边框底部：1px纯色灰色；
高度：40px；
}
#头衔{
填充：10px 0 20px；
字体大小：粗体；
浮动：左；
}
#菜单{
保证金：0自动；
宽度：220px；
填充物：5px；
}
#菜单ul{
边框：1px纯灰；
边界半径：5px；
高度：30px；
}
#菜单里{
浮动：左；
列表样式：无；
右边框：1px纯色灰色；
高度：20px；
填充物：5px10px；
}
#菜单li：悬停{
背景颜色：灰色；
}
#结果{
位置：相对位置；
顶部：-30px；
左：153px；
右边框：1px纯白；
}
#运行按钮{
浮动：对；
位置：相对位置；
}
#跑{
填充：10px 15px 10px 15px；
边界：无；
边界半径：10px；
}
#运行：悬停{
背景颜色：灰色；
}
.休息{
明确：两者皆有；
}
.codecontainer{
宽度：49%；
浮动：左；
位置：相对位置；
顶部：-24px；
身高：100%；
}
.codecontainer textarea{
宽度：100%；
身高：100%；
边界：无；
右边框：1px纯色灰色；
字体系列：单字；
字体大小：120%；
填充：4px；
}
.代码标签{
边框：1px灰色实心；
宽度：50px；
位置：绝对位置；
顶部：20px；
右：10px；
填充物：5px 5px 5px；
边界半径：5px；
}
#CSS容器，#JS容器{
显示：无；
}
iframe{
身高：100%；
宽度：100%；
保证金：0；
浮动：左；
}
代码播放器
跑
- HTML
- CSS
- JS
- 结果
HTML
示例代码
CSS
示例代码
JS
示例代码
结果
编码容器中<div class="codecontainer" id="htmlContainer">
<span class="codeLabel">HTML</span>
<textarea>Example code</textarea>
HTML
示例代码
<div class="codecontainer" id="htmlContainer">
<span class="codeLabel">HTML</span>
<textarea>Example code</textarea>
</div> <--- you have missed this closing tag for first "codecontainer"
HTML
示例代码
你能告诉我们你真正想要实现什么吗？你的问题不太清楚，对不起，弄错了。我希望我的iframe也是窗口的一半，并且在文本区域旁边，用于输入HTML。谢谢Arsh。如果这个世界只存在于像你这样的人之外，那么这个世界一定是一个非常适合居住的地方。谢谢你所做的一切。@RVDE总是很乐意帮助：）。很高兴这有帮助
<!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>