首页 > 解决方案 > 划分两个div,其中一个是动态的

问题描述

我有两个 DIV,上面的一个可以动态更改:

<body ng-app="app">
    <div ng-controller="ctrl1" class="container" style="height: 80% overflow: auto;"><br>
        <div class=".col-md-6 .col-md-offset-3"><input type="text" id="barra-ricerca" onkeyup="ricerca()" placeholder="Cerca" class="form-control"></div><br>
        <div class="overflow-auto">
            <ul id="elenco" type="none">
                <li ng-repeat="bar in bars"><div class="d-flex"><div class="col-4" style="margin-top: 1%">{{bar.name}}</div><div class="col-4"><button ng-click="apriPagina(bar.id)" class="btn btn-primary">More Info</button></div></div><hr></li>
            </ul>
        </div>
    </div>

<div class="text-center text-lg-start bg-light text-muted footer">

    <center>
        <br>
        <p><i class="bi bi-person-fill"></i></i> Ligugnana Alessandro</p>
        <p>
            <i class="bi bi-mailbox"></i>
            alessandro.ligugnana@gmail.com
        </p>
        <p><i class="bi bi-phone"></i></i> +39 331 276 1217</p>
    </center>

    <!-- Section: Links  -->

    <!-- Copyright -->
    <div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
        © 2021 Copyright
    </div>
    <!-- Copyright -->
</div>
</body>

有一个导航栏可以缩小搜索范围,然后缩小 div,这样页脚就会跳到屏幕的一半。 这是我搜索内容时的屏幕

我尝试使用位置:固定或绝对,但第二个 div 覆盖了另一个 div。提前致谢

标签: javascripthtmlcss

解决方案


推荐阅读