我的页面上有两个主要的div：第一个包含手风琴菜单，第二个包含页面的主要文本。调整浏览器窗口大小时，两个div相互重叠，如下图所示：
我该如何停止？我进行了很多搜索以找到答案，但是没有任何效果。我尝试添加overflow: auto;，float: left，但是我在保证金下玩了……没有成功。
这是我的代码：
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}body#help {
font-size: 3vmin;
/*Background*/
background: #444444; /* For browsers that [are shit enough to] do not support gradients */
background: -webkit-linear-gradient(#1a8cff, #4da6ff); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#1a8cff, #4da6ff); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#1a8cff, #4da6ff); /* For Firefox 3.6 to 15 */
background: linear-gradient(#1a8cff, #4da6ff); /* Standard syntax */
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}
.panel {
background-color: #666666;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
width:250px;
}
#helpMenuDiv {
display: inline-block;
position: fixed;
top:0px;
bottom: auto;
right: auto;
left: 0px;
width: 270px;
height: 840px;
order: solid 2px black;
overflow: auto;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 250px;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.accordion.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.accordion.active:after {
content: "\2212";
}
#helpPageDiv {
width: 800px;
max-width: 800px;
border: solid 2px black;
margin: auto;
}<!DOCTYPE html>
<html id="helpHtml">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body id="help">
<!---Introduction--->
<div id="helpPageDiv">
<p>Content of the first div (main text)</p>
</div>
<!---Accordion--->
<div id="helpMenuDiv">
<button class="accordion">Section 1</button>
<div class="panel">
<p class="panelText">Content of the accordion</p>
</div>
<!---More accordions--->
<script src="scripts/accordion.js"></script>
</body>
</html>预先感谢您的回答！
最佳答案
我有两个建议。
您可以使用随窗口调整大小而改变的Jquery，为您的helpPageDiv左边距等于helpMenuDiv的宽度。
尝试同时赋予helpMenuDiv和helpPageDiv宽度，并使它们向左浮动。您也可以在小屏幕上将菜单放在内容div上方。
这是我创建的一个简单示例，可能对您有用。
>>> JSFiddle。
也尝试调整结果窗口的大小。
$('.menu .menu-item h3').click(function() {
$(this).siblings('p').slideToggle();
});.holder:after{
content: '';
display: block;
clear: both;
}
.menu {
width: 20%;
float: left;
background: #64c1be;
}
.content {
width: 80%;
height: 200px;
float: left;
background: #73c379;
}
.content .inner{
color: #4d4d4d;
border: 1px solid green;
margin: 5px;
padding: 5px;
}
.menu .menu-item {
background: #ddd;
margin: 10px 0;
}
.menu .menu-item h3 {
background: #ccc;
margin: 0;
cursor: pointer;
}
.menu .menu-item p {
margin: 0;
padding: 5px 3px;
display: none;
}
@media (max-width: 550px){
.menu, .content{
width: 100%;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
<div class="menu">
Accordian menu
<div class="menu-item">
<h3>
+ Section 1
</h3>
<p>
Menu content
</p>
</div>
<div class="menu-item">
<h3>
+ Section 2
</h3>
<p>
Text Text
</p>
</div>
<div class="menu-item">
<h3>
+ Section 3
</h3>
<p>
faucibus orci
</p>
</div>
<div class="menu-item">
<h3>
+ Section 4
</h3>
<p>
ullamcorper
</p>
</div>
</div>
<div class="content">
Content goes here
<div class="inner">
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.
</div>
</div>
</div>