Content Div 与 Menu Div 重叠 - HTML & CSS答案

【问题标题】：Content Div overlaps Menu Div - HTML & CSSContent Div 与 Menu Div 重叠 - HTML & CSS
【发布时间】：2019-06-02 17:02:25
【问题描述】：

我的内容导航 div 与菜单导航 div 重叠。请让我知道我在这里缺少什么。请在下面找到小提琴链接：

https://jsfiddle.net/y4c2xs5j/1/

HTML：

<div class="top-nav">
        <div class="menu-nav">
            <div class="row">
                <div class="col-md-12">
                    <span>Test</span>
                </div>
            </div>
        </div>
        <div class="content-nav">
            <div class="row">
                <div class="col-md-12">
                    <div>
                        <p>
                            Card content
                        </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8">
                    <div>
                        <p>
                            Card content
                        </p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div>
                        <p>
                            Card content
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS：

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
    background: red;
    height: 100vh;
}

.top-nav {
    width: 100vw;
}

.menu-nav {
    width:60px;
    background: green;
    height: 100vh;
    float: left;
}
.content-nav {
    width: calc(100vw - 60px);
    background: yellow;
    height: 100vh;
}

【问题讨论】：

标签： html css bootstrap-4 css-position

【解决方案1】：

根据我的理解，你只想用 menu-nav 覆盖 60px 宽度，其余的想用 content-nav 覆盖，根据下面的代码：

.menu-nav {
    width:60px;
    background: green;
    height: 100vh;
    float: left;
}
.content-nav {
    width: calc(100vw - 60px);
    background: yellow;
    height: 100vh;
}

如果我猜对了，那么您只需要使用 content-nav 添加一个属性，溢出：隐藏；

.menu-nav {
    width:60px;
    background: green;
    height: 100vh;
    float: left;
}
.content-nav {
    width: calc(100vw - 60px);
    background: yellow;
    height: 100vh;
    overflow:hidden;
}

通过添加overflow hidden，你会得到完整的width rest 60px with content-nav，这是float:left引起的问题，当我们使用float属性时，就会产生问题，同样我们必须使用overflow :隐藏

【讨论】：

【解决方案2】：

试试这个代码。这是你需要的吗？

<div class="top-nav">
        <div class="menu-nav">
            <div class="row">
                <div class="col-md-12">
                    <span>Test</span>
                </div>
            </div>
        </div>
        <div class="content-nav">
            <div class="row">
                <div class="col-md-12">
                    <div>
                        <p>
                            Card content
                        </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8">
                    <div>
                        <p>
                            Card content
                        </p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div>
                        <p>
                            Card content
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
    background: red;
    height: 100vh;
}

.top-nav {
    width: 100vw;
  display: flex;
  flex-direction: column;
}

.menu-nav {
    width: 100vw;
    background: green;
    height: 20vh;
    float: left;
}

.content-nav {
    width: calc(100vw - 100px);
    background: yellow;
    height: 100vh;
}

【讨论】：

【解决方案3】：

您只需要在“.content-nav”中添加一个属性，并在两个标签（.menu-nav，.content-nav）的父级中添加clearifx类

<div class="top-nav clearfix">

.menu-nav {
    width:60px;
    background: green;
    height: 100vh;
    float: left;
}

.content-nav {
    width: calc(100vw - 60px);
    background: yellow;
    height: 100vh;
    float: left;
}

【讨论】：

【解决方案4】：

每当您使用行和列时，请检查您是否至少有一个包含它们的容器。您在右侧看到的间隙是由行的负边距造成的。

简单的解决方法是在菜单和内容导航上或内部设置.container-fluid。

在菜单和内容导航上

<div class="top-nav">
    <div class="menu-nav container-fluid">
        ...
    </div>
    <div class="content-nav container-fluid">
        ...
    </div>
</div>

演示： https://jsfiddle.net/davidliang2008/x9d3bvLp/8/

内部菜单和内容导航

<div class="top-nav">
    <div class="menu-nav">
        <div class="container-fluid">
            ...
        </div>
    </div>
    <div class="content-nav">
        <div class="container-fluid">
            ...
        </div>
    </div>
</div>

演示： https://jsfiddle.net/davidliang2008/x9d3bvLp/7/

您不需要计算 content-nav 的宽度，因为流体容器会将其宽度设置为 100%：

.content-nav {
    /*width: calc(100vw - 60px);*/
    background: yellow;
    height: 100vh;
}

【讨论】：