Javascript 当我将一个文件加载到一个div中时，div会跳下来_Javascript_Jquery_Html_Css

Javascript 当我将一个文件加载到一个div中时，div会跳下来

javascript jquery html css

Javascript 当我将一个文件加载到一个div中时，div会跳下来,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个页面如下所示： <body> <div class="pollid" > <select class="pollid" id="pollid" size="[2]" > [options] </select></div> <div class="seperator"></div> <div class="options"> <select class="options" id="opt

我有一个页面如下所示：

<body>
<div class="pollid" >
<select class="pollid" id="pollid" size="[2]" >
 [options]
</select></div>
<div class="seperator"></div>
<div class="options">
<select class="options" id="options" disabled="disabled" size="2">
<option id="deadoption">Select a poll to enable this box.</option>
</select></div>
<div class="seperator"></div>
<div class="options2" id="options2">
</div>
</body>

<input type="text" id="newopt" label="Option: " />
<button id="submit" type="button" value="Submit" />

select {
height: 100%;
width: 100%;
}

div.pollid  {
height: 100%;
width: 30%;
display: inline-block;
}

div.options {
height: 100%;
width: 30%;
display: inline-block;
}

div.options2 {
height: 100%;
width: 30%;
display: inline-block;
}

.seperator {
height: 100%;
width: 3%;
display: inline-block;
}

newOption.html如下所示：

<body>
<div class="pollid" >
<select class="pollid" id="pollid" size="[2]" >
 [options]
</select></div>
<div class="seperator"></div>
<div class="options">
<select class="options" id="options" disabled="disabled" size="2">
<option id="deadoption">Select a poll to enable this box.</option>
</select></div>
<div class="seperator"></div>
<div class="options2" id="options2">
</div>
</body>

<input type="text" id="newopt" label="Option: " />
<button id="submit" type="button" value="Submit" />

select {
height: 100%;
width: 100%;
}

div.pollid  {
height: 100%;
width: 30%;
display: inline-block;
}

div.options {
height: 100%;
width: 30%;
display: inline-block;
}

div.options2 {
height: 100%;
width: 30%;
display: inline-block;
}

.seperator {
height: 100%;
width: 3%;
display: inline-block;
}

现在，这是可行的。但是，当我单击加载该页面的选项时，div会向下跳转，以便输入的底部位于屏幕的底部。这不是我想要的。我希望div保持原样，占据30%的屏幕。我根本不希望屏幕滚动，一旦加载html就会滚动。我怎样才能解决这个问题呢？

我在试验后找到了解决方案。出于某种原因，它看起来像是在这些div中放入除“使其向下跳转”以外的任何内容，并为它们提供属性“垂直对齐：顶部”修复了这一问题。

mmm我认为这破坏了您的HTML，请使用控制台检查当您在div中手动插入HTML代码并加载页面时会发生什么？它看起来怎么样？当我手动将它插入div时，同样的情况也会发生。如果我将上面div中的一个select元素复制到其中，那么它可以正常工作，但是如果我在其中放入任何其他内容，它仍然会跳到屏幕底部。实际上，如果我插入任何指定大小的select元素，它的工作原理与其他select元素相同。但我不知道为什么。为什么要使用AJAX加载newOption.html？如果只有两行且始终相同，则可以将它们嵌入div中，并在页面加载时隐藏。然后，触发Ajax的同一事件可以显示这两行代码。它的加载速度会快得多。