нежелательное пространство после расположенного элемента div поверх другого элемента div

Question

У меня проблема с настройкой макета моего сайта.

У меня есть 2 тега div, у одного есть приветственное сообщение и картинка. Другой div пуст до тех пор, пока пользователь не введет информацию в форму, после чего я использую jquery, чтобы скрыть приветственное сообщение и отобразить контент, относящийся к данным пользователя.

Проблема в том, что браузер считает, что ему нужно вертикальное пространство для обоих элементов div, даже если они сложены друг на друга, в результате получается лот пустого пространства внизу страницы и длинная нежелательная полоса прокрутки.

Я использую position: относительный для обоих div, потому что таким образом страница выглядит хорошо на маленьких экранах и больших экранах.

Я использую значения left: и top: для перемещения приветственного элемента 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

Только что нашел хороший ответ ... Я собираюсь оставить это здесь на случай, если у кого-то еще будет похожая проблема.

Установите отображение browsable на «none», пока sample_G не будет скрыт,затем используйте jquery, чтобы «показать» просматриваемый.

Если кто-то видит проблему с этим или имеет лучший ответ, пожалуйста, не стесняйтесь писать.

Спасибо!