html - 内容 Div 与菜单 Div 重叠 - HTML 和 CSS

Question

我有内容导航 div 重叠菜单导航 div。请让我知道我在这里错过了什么。请在下面找到 fiddle 链接:

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;
}

Answer 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, overflow:hidden 的属性；

.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 :隐藏