Css 高度100%高度滚动div内部高度100%div

所以我到处寻找解决方案，但似乎找不到一个适合我的。我试图在不使用javascript的情况下解决这个问题，但基本上我的第一个挑战是在左侧创建一个div，并让它滚动，同时保持浏览器大小不变

但现在，我在将另一个高度100%div放入高度100%div时遇到问题

我确实觉得我需要把所有的按钮和滚动放在一个div中，因为否则它会给右边的div带来问题

问题是，无论我尝试什么，无论位置如何，子div似乎都会从底部的父div中消失。我想高度保持100%的浏览器大小。像这样：

当我添加按钮时，会发生以下情况：

HTML

<div class = "main">
    <div class="head">Header</div>
</div>

<div class="left">
    <div class="inleft">
        <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 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>

---

您需要补偿

.inside div

上方按钮的高度。

.left

div的高度为100%，内部也是如此，但除了100%的高度外，它还被按钮按下。您可以尝试在.inside的顶部（55px）添加一些填充，并使用负边距将其拉回（但我想您可能会添加更多按钮？）。所以你也可以移动你的overflow-y：滚动到

.left

div以隐藏所有从底部被推出的内容。

内部

嗨，不是粗鲁，但是你的html非常凌乱，很难阅读，我想帮你，但我没有时间清理所有内容并匹配标签来查找你的问题。你也可以提供按钮的代码，我看了小提琴和html似乎关闭了。请把它整理一下，我相信你会得到更多的帮助。很抱歉，我在编辑这篇文章，而你似乎是为我做的。非常抱歉！非常感谢。至于按钮，我将把jquery插入其中，这样就可以把它们放在那里了。嘿，Evan，谢谢你的回复。我添加了填充顶部：55px；到。里面，也放在页边顶部：-55px；到里面去，对吗？这些就是我要用的所有按钮。至于把overflow-y放在左边，我希望上面的三个按钮总是固定的，用户总是可以看到它。我看了小提琴，我喜欢左和右的div都是齐平的，但我不想要固定的高度，我希望两个div保持齐平，底部没有空间，始终根据浏览器高度进行调整。在浏览器窗口中，我只希望左右两个div可以滚动。

 * {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box; 
}
html, body {
    height:100%;
} 
body {
    padding:60px 0 0 300px; /* 60 — header height*/
    margin:0;
}
.main,
.left,
.containerRight{
    border:1px solid #000;
}
.main {
    min-width:100%;
    height:60px;
    margin-top: -60px;  /* 60 — header height*/
    margin-left: -300px;
}

.left {
    float:left;
    height: 100%;
    width: 300px;
    margin-left: -300px;
    overflow-y: scroll;
}

.containerRight {
    float:left;
    width:100%;
    height: 100%;
    overflow-y: scroll;
}
.head {
    float: right;   
}