Question

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

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

通过添加溢出隐藏，您将获得带有content-nav的完整宽度其余60px，这是由float：left引起的，当我们使用float属性时，就会产生问题，同样，我们也必须使用溢出：隐藏

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

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

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

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

4 个答案:

在菜单和内容导航上

内部菜单和内容导航