Question

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

但是现在，我有问题将另一个高度100％div放入高度100％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>

CSS

 * {
    -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;   
}

Answer 1

您需要补偿位于.inside div上方的按钮的高度。 .left div的高度为100％，内部也是如此，但除了100％的高度之外，它还被按下了。您可以尝试在.inside的顶部（55px）添加一些填充，并将负边距向上拉（但我假设您可能会添加更多按钮？）。所以你也可以移动你的溢出y：滚动到.left div以隐藏从底部推出的所有内容。inside。

高度100％高度滚动div高度100％div

1 个答案: