Сделать Div остался в той же позиции

Question

Как сделать так, чтобы тег div оставался в одном и том же месте одного размера? У меня есть следующий код для отображения информации с использованием левой и правой панели с именами group-left и group-right. При изменении содержимого group-right высота group-left изменяется. Я хочу фиксированный размер и фиксированную позицию, если содержимое растет.

<div class="pane even">
    <div class="group-left bg-highlight" style="top: 0px;">
        <div class="pane-content">
                <p class="m-t-md">
                     @foreach (var item in rpInfo)
                            {
                                <li data-expanded="true" class="panel-handler" data-id="@item.ID">
                                    <i class="fa fa-check-circle"></i>@item.PartyName
                                    <ul class="list-unstyled m-x-md m-b-md">
                                        <li data-expanded="true">  <i class="fas fa-check-circle"> 
                                        </i> @item.ContactName </li>
                                    </ul>
                                </li>
                            }
                  </p>                
        </div>
    </div>
    <div class="group-right" style="top: 0px;">
        @foreach (var item in rpInfo)
                {
                      <div class="card card-understated">
                            <div class="card-heading">
                                <h4>@(Localizer["Contact Preview "])</h4>
                            </div>
                            <div class="card-body">
                                <p>
                                    @item.ContactName<br>
                                    @item.ContactTitle<br>                                     
                                    @item.AddressLine1<br />
                                    @item.City, @item.State @item.Country
                                </p>
                            </div>
                        </div
                  }
    </div>
</div>

Вот как выглядит раздел CSS:

.group-left, .group-right {
    float: none;
    min-height: 320px;
    vertical-align: middle;
    position: relative;
    margin: 0;
    padding: 0;
}

У меня есть этот код javascript создать древовидную структуру и обработать событие Onclick:

   <script>
            $(document).ready(function () {
                $("#treeview").kendoTreeView();
                $(".panel-handler ").click(function () {
                    let id = $(this).data("id");
                    if ($("#" + id).css('display') === 'none') {
                        $(".rpspanel ").slideUp();
                        $("#" + id).slideDown();
                    }

                });
            });
        </script>

Answer 1

Вы только установили минимальную высоту для div, вам нужно указать высоту, если вы хотите, чтобы она оставалась одинакового размера, например: "height: 300px". Если вы хотите, чтобы элементы div были зафиксированы на странице, то есть заблокированы в этой позиции и не будут перемещаться даже при прокрутке, вам необходимо применить «position: fixed».