我遇到了不需要的空白区域的问题，现在已经知道了，但现在我遇到了浏览器调整大小的问题。如何保持两个滚动div调整高度和宽度。我希望左边的div自动调整高度，而右边的div自动调整高度和宽度，无论浏览器的大小如何。谢谢你的帮助。
我试图让它更容易并在JSfiddle中显示它，但它似乎没有正确显示。
以下是代码：
<html>
<body>
<div class="mainContain">
<div class = "main">
sdfsdf
</div>
<div id="container">
<div class="topmenu">
<div class="leftmenu">
button
</div>
<div class="rightmenu">
button
</div>
</div>
<div class="filter">
</div>
<div class="left">
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
</div>
</div>
<div class="containerRight">
A
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
</div>
</div>
</body>
</html>
<style>
html, body{
min-height:100%;
margin:0;
padding:0;
}
#container {
float:left;
margin: 0;
padding: 0;
height: 90%;
width: 300px;
border:solid #000 1px;
display: inline-block;
}
.left {
padding:0;
overflow-y: scroll;
overflow-x:hidden;
height:100%;
/*-webkit-overflow-scrolling: touch;*/
}
.containerRight {
float:left;
margin: 0;
padding: 0;
height: 90%;
width:76%;
display: inline;
border:solid #000 1px;
overflow: scroll;
overflow-x:hidden;
}
.main {
height:50px;
width: 100%;
border: solid 1px black;
}
.right {
padding:0;
overflow: scroll;
overflow-x:hidden;
height:100%;
width:100%;
/*-webkit-overflow-scrolling: touch;*/
}
.post {
width: 290px;
height: 100px;
display: inline-block;
}
.topmenu {
height: 26px;
width:300px;
border: solid 1px #000000;
}
.leftmenu {
float:left;
width: 147px;
height: 25px;
border: solid 1px black;
}
.rightmenu {
float:right;
width: 147px;
height: 25px;
border: solid 1px black;
}
.filter {
margin-top 250px;
width:300px;
height:30px;
border: solid 1px black;
}
.mainContain {
height:100%;
width:100%;
}
</style>
答案 0 :(得分：0)
我看过你的代码，我在我的浏览器上运行它，因为它显示在我的Mozilla下，故障不在造型中，错误是按钮的位置你的按钮在'id = container'标签中从'id = left'标记中取出空格，因此如果你删除了它的数据就会出现：
<div class="topmenu">
<div class="leftmenu">
button
</div>
<div class="rightmenu">
button
</div>
</div>
<div class="filter">
</div>
从您的代码中您可以看到区别的这一部分。
答案 1 :(得分：0)
我修改了你的代码 这两个文件是index.html和style.css
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="mainContain">
<div class = "main">
sdfsdf
</div>
<div id="container">
<div class="topmenu">
<div class="leftmenu">
button1
</div>
<div class="rightmenu">
button2
</div>
</div>
<div class="left">
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
</div>
</div>
<div class="containerRight">
A
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
<div class="post">
A
</div>
</div>
</div>
</body>
</html>
html, body{
min-height:100%;
margin:0;
padding:0;
}
#container {
float:left;
margin: 0;
padding: 0;
height: 90%;
width: 300px;
border:solid #000 1px;
display: inline-block;
}
.left {
padding:0;
overflow-y: scroll;
overflow-x:hidden;
height:90%;
/*-webkit-overflow-scrolling: touch;*/
}
.containerRight {
float:left;
margin: 0;
padding: 0;
height: 90%;
width:76%;
display: inline;
border:solid #000 1px;
overflow: scroll;
overflow-x:hidden;
}
.main {
height:50px;
width: 100%;
border: solid 1px black;
}
.right {
padding:0;
overflow: scroll;
overflow-x:hidden;
height:100%;
width:100%;
/*-webkit-overflow-scrolling: touch;*/
}
.post {
width: 290px;
height: 100px;
display: inline-block;
}
.topmenu {
height: 10%;
width:300px;
border: solid 1px #000000;
}
.leftmenu {
float:left;
width: 147px;
height: 25px;
border: solid 1px black;
}
.rightmenu {
float:right;
width: 147px;
height: 25px;
border: solid 1px black;
}
.filter {
margin-top 250px;
width:300px;
height:30px;
border: solid 1px black;
}
.mainContain {
height:100%;
width:100%;
}
我认为这是你的答案，如果你想问别的什么，那么你知道该怎么做， 如果这是你的答案，那么将其标记为已回答，以便它不再保留在未答复的类别中。