我有内容导航 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;
}
最佳答案
根据我的理解,你只想用 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 :隐藏
关于html - 内容 Div 与菜单 Div 重叠 - HTML 和 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56412325/