点击按钮下拉的时候，会把下边的内容推下去，这是为啥呀
来源：3-2 作业题
unbreakable_全栈
2020-09-22 17:24:28
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1">
<title>Document</title>
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/gird.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<header class="header-container">
<div class="container">
<div class="row">
<div class="header-logo-container col-md-3 d-md-none">imooc</div>
<div class="header-btn-container d-md-none">
<button type="button" class="btn-toggle" id="btn-toggle"></button>
</div>
<div class="header-nav-container col-md-9 d-none d-md-block">
<ul class="header-nav">
<li class="header-nav-item"><a href="###" class="header-nav-link">首页</a></li>
<li class="header-nav-item"><a href="###" class="header-nav-link">java</a></li>
<li class="header-nav-item"><a href="###" class="header-nav-link">ios</a></li>
<li class="header-nav-item"><a href="###" class="header-nav-link">Android</a></li>
<li class="header-nav-item"><a href="###" class="header-nav-link">php</a></li>
</ul>
</div>
</div>
</div>
</header>
<nav class="nav-container d-md-none" id="nav">
<ul class="container">
<li><a href="###" class="nav-link">首页</a></li>
<li><a href="###" class="nav-link">java</a></li>
<li><a href="###" class="nav-link">ios</a></li>
<li><a href="###" class="nav-link">Android</a></li>
<li><a href="###" class="nav-link">php</a></li>
</ul>
</nav>
<div class="slider-container">
<div class="container">
<img src="./img/1.png" class="slider-img" alt="">
<div class="slider-text">IMOOC</div>
<div class="slider-start">start</div>
</div>
</div>
<!-- 第二区域开始 -->
<div class="second-container">
<div class="container">
<ul class="second-ul">
<li class="second-item active">关于慕课网</li>
<li class="second-item">关于课程</li>
<li class="second-item">核心团队</li>
<li class="second-item">新增专题</li>
</ul>
</div>
</div>
<!-- 第二区域结束 -->
<script>
// console.log(window.innerWidth)
// console.log(document.documentElement.clientWidth)
// console.log(document.documentElement.getBoundingClientRect().width)
// console.log(navigator.userAgent)
var nav = document.getElementById('nav')
var navExtendedClassName = 'nav-container-extended'
document.getElementById('btn-toggle').onclick = function () {
if (nav.classList.contains(navExtendedClassName)) { // 收起
nav.classList.remove(navExtendedClassName)
} else { // 展开
nav.classList.add(navExtendedClassName)
}
}
</script>
</body>
</html>
--------------------------------
/* 布局开始 */
.header-container {
position: relative;
background-color: #7EA6B1;
}
@media (min-width: 576px) {
.header-container {
background-color: #B2C5CC;
}
}
.header-logo-container,
.header-btn-container,
.header-nav-container {
height: 64px;
}
.header-logo-container {
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
font-size: 16px;
}
.header-btn-container {
display: flex;
justify-content: flex-end;
align-items: center;
position: absolute;
top: 0;
right: 20px;
}
/* nav */
.nav-container {
position: relative;
top: -1px;
overflow: hidden;
height: 0;
transition: height .5s;
background-color: #7EA6B1;
}
.nav-container-extended {
top: 0;
height: 201px;
}
/* slider-container */
.slider-container {
background-color: #B2C5CC;
}
.slider-container .container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.slider-container img {
display: block;
width: 100px;
}
.slider-img,
.slider-text,
.slider-start {
margin-top: 20px;
text-align: center;
}
.slider-text {
color: #ffffff;
}
.slider-start {
width: 80px;
height: 30px;
line-height: 30px;
background-color: #ffffff;
border-radius: 2px;
margin-bottom: 50px;
}
.second-container {
border-bottom: 1px solid #ddd;
}
.second-container .second-ul {
height: 64px;
display: flex;
justify-content: center;
align-items: center;
color: #bababa;
}
.second-item {
flex: 1;
text-align: center;
}
.second-item.active {
color: #545454;
}
/* 布局结束 */
/* 组件开始 */
.btn-toggle {
border: 1px solid #ffffff;
background-color: transparent;
padding: 10px;
border-radius: 4px;
cursor: pointer;
}
/* 组件结束 */
/* 内容开始 */
.header-nav,
.header-nav-item,
.header-nav-link {
height: 100%;
}
.header-nav {
display: flex;
justify-content: flex-end;
font-size: 14px;
}
.header-nav-item {
margin-left: 24px;
}
.header-nav-item:first-child {
margin-left: 0;
}
.header-nav-link {
display: flex;
align-items: center;
font-weight: bold;
}
/* nav */
.nav-link {
display: block;
height: 40px;
line-height: 40px;
font-weight: bold;
}
/* 内容结束 */
1回答
-
同学你好，下拉菜单是相对定位，不会脱离文档流，所以显示的时候会把内容挤下去。建议修改为绝对定位，定位在顶部下面，改变高度，不改变top值。参考
效果
自己测试下，祝学习愉快！
0
相似问题