如何将我的 div 内容转换为响应式？

Question

在我的项目中，我使用顶部导航菜单（紫色部分）和左侧菜单（粉色部分）作为视图的布局，您可以在图像中看到。但是当我从视图中删除一些内容时，左边的粉红色菜单在底部仍然很长。所以它在我的页面底部产生了许多空白。我想让它响应。我希望它和内容一样长。我不擅长前端，所以 Idk 是关于 HTML 或 CSS 的。我进行了搜索，但我找不到关于我的问题的正确关键字。我希望我把问题解释清楚了：/

我的看法；

我的问题部分；

以及该粉色部分的 HTML 代码；

        <div class="col-md-3 top-nav">
            <div class="logo">
                <a href="index.html"><h1>Alperen Öz</h1></a>
            </div>
            <div class="top-menu">
                <span class="menu"> </span>

                <ul class="cl-effect-16">
                    <li><a class="active" href=""~/Homepage/home" data-hover="Anasayfa">Anasayfa</a></li>
                    <li><a href="#" data-hover="Fotoğraf Galerisi">Fotoğraf Galerisi</a></li>
                    <li><a href="#" data-hover="Hakkımda">Hakkımda</a></li>
                </ul>
                <!-- script-for-nav -->
                <!-- script-for-nav -->
                <ul class="side-icons">
                    <li><a class="fb" href="#"></a></li>
                    <li><a class="twitt" href="#"></a></li>
                    <li><a class="goog" href="#"></a></li>
                    <li><a class="drib" href="#"></a></li>
                </ul>
            </div>
        </div>
        @RenderBody()
        <div class="clearfix"> </div>
    </div>

提前谢谢 :)

Answer 1

你应该把这个菜单div和带视图的div放在同一个父div中，并设置top-navheight: 100%。所以当你删除一个视图时，父元素也会缩小它的高度，所以现在 100% 会比视图在里面时要小，当你添加一个新视图时，它会变大，所以你会得到粉红色左边的栏也是如此：D