css - 将 div 放置在另一个 div 之上后不需要的空间

Question

我在调整网站布局时遇到问题。

我有 2 个 div 标签，一个有欢迎信息和一张图片。另一个 div 是空的，直到用户在表单中输入信息，此时我使用 jquery 隐藏欢迎消息并显示与用户数据相关的内容。

问题是浏览器认为两个 div 都需要垂​​直空间，即使它们相互堆叠，这也会导致页面底部有很多空白空间和一个不需要的长滚动条。

我对两个 div 使用 position: relative 因为这样可以使页面在小屏幕和大屏幕上看起来都不错。

我使用 left: 和 top: 值将欢迎 div 移动到空内容 div 的顶部。

在此先感谢您的帮助!如果您需要更多信息，请告诉我。这是我的 HTML sample_G 位于可浏览前面的示例。

<div id="browsable" class="scrollable">
    <div id="graphs" class="items">
    </div>
</div>

<div id="sample_G">
    <p class="Welcome">Welcome to the graphing tool!</p>
    <img src="pics/Sample_graph.jpg" /> 
</div>

Answer 1

刚想出一个很好的答案...我会把它留在这里，以防其他人遇到类似的问题。

将可浏览的显示设置为“无”，直到隐藏 sample_G，然后使用 jquery 来“显示”可浏览。

如果有人发现此问题或有更好的答案，请随时发帖。

谢谢!