Javascript 显示/隐藏功能-额外的空白

关于我早些时候的另一篇帖子，@Moob回答了这个问题，我现在有另一个问题。使用相同的代码-每当重新加载页面时，如果选择了某个选项，文本将显示在下拉列表后出现巨大的间隙。你知道它为什么这么做吗

这是codepen.io：

函数显示（aval）{
如果（aval==“0”）{//if 1则显示它
optionies.style.visibility='visible'；
optionies.style.display='block'；
Form.fileURL.focus（）；
} 
否则{//为了其他一切，把它藏起来
optionies.style.visibility='hidden'；
optionies.style.display='none'；
}    
}
你对哪个学位感兴趣

请选择一个
同时入学
2015年应用生物伦理学夏季研究
非学位（9小时或更少）
您选择了红色选项，所以我在这里，我是Lorem ipsum dolor sit amet，mel fugit epicuri laboramus ei，modo elit Eliter sea te。这是一种不公平的行为，是一种不公平的行为。这是一个直接的决定因素。Dicit贬损了similique的广告，有自由原子产品ea，特别是电子产品vocibus。
这是一个很好的例子，与多洛尔·法布拉斯（dolore fabulas cu）相比，nec Chinc justo laoreet cu。这是一个很好的例子。阿甘·阿特奎没有给他下定义。首席虹膜治疗师，accumsan assueverit vim ut。一个完美的人，一个不断进步的人，一个不断进步的人。
Mucius Apperere duo id.兼销售mazim ei。Vix melius Intellegamut。我是城市居民。特写：奥古斯·普罗普塔·斯普兰迪德·尤姆·库鲁姆皮特异议法庭。
我在奥古斯·努拉·帕坦（augue nulla partem），在乌苏·费利·尤伊斯莫（usu falli euismod）。我的朋友，我的朋友。他是一个很好的人，他是一个很好的人。这是他的拉丁语。我不喜欢装饰性的Expertendis，但我喜欢提名。
名字：



姓氏：



中间名：

因为您将可见性设置为“隐藏”，而这不会删除元素，所以在仍占据原始空间的情况下，它不会显示元素

<div id="optionyes" style="visibility:hidden">

---

如果您想让它表现得像页面中不存在一样，请使用

display:none

显示：无将保留已占用的空间，而不会释放空间。在布局引擎的透视图中，

可见性：隐藏没有任何意义，只有渲染引擎不会渲染该部分

将
更改为

<div id="optionyes" style="visibility:hidden">