Question

基本上我有3个div：

<div></div>
<div></div>
<div></div>

点击第一个div切换第二个div的可见性

我想要的是第3个div会占用剩下的所有空间但不会更多。如果有大的第3 div内容，我只想在第3个div而不是整页上滚动条。

我有JS解决方案。所以任何纯CSS都会受到高度赞赏。

Answer 1

这是一种涉及使用CSS表格单元格和绝对定位的方法。

创建一个CSS表作为顶级容器.main，并定义三个display: table-row容器.head，.extra和.content。

在.content内，嵌套display: table-cell元素.wrap并设置position: relative。在.wrap内，使用绝对定位来容纳将保存内容的.scroller容器。

如果您隐藏.extra块，.content将垂直拉伸以占用剩余空间。

＆＃13;

html, body {
    height: 100%;
    margin: 0;
}
.main { 
    border: 1px dotted gray;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: table;
    overflow: hidden;
}
.head {
    display: table-row;
    height: 50px;
    background-color: beige;
    
}
.extra {
    display: table-row;
    /* display: none; */
    height: 100px;
    background-color: tan;
}
.content {
    display: table-row;
    background-color: lightblue;
    height: auto;
}
.content .wrap {
    display: table-cell;
    height: auto;
    position: relative;
}
.scroller {
    overflow: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
}

＆＃13;

<div class="main">
    <div class="head">head</div>
    <div class="extra">extra</div>
    <div class="content"><div class="wrap"><div class="scroller">
        <p>Scrolling div...</p>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum imperdiet metus ac elementum. Donec viverra porttitor velit, ut eleifend nulla porttitor quis. Donec placerat, leo ac volutpat pellentesque, elit mauris aliquet metus, sit amet dictum enim augue consequat elit. Pellentesque eu diam a sem ornare tristique. Sed sollicitudin elementum nibh, eget tincidunt sem rhoncus at. Morbi cursus ornare dolor, vel tempus leo blandit ut. Donec at dictum eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer faucibus tellus in aliquet accumsan. Nam scelerisque ante eros, et tempus dolor mollis nec. Cras in mauris ac orci hendrerit venenatis. Nunc porta nisi eu odio feugiat, sed fermentum odio posuere. Vivamus luctus dui sit amet lobortis dignissim. Nulla feugiat est lacinia est porta porttitor. </p>
        </div>
        </div>
    </div>
</div>

＆＃13;

Answer 2

如果您知道只有三个div，您可以控制高度，并在第二个div折叠时将其从33％更改为66％，并使用css过渡来制作动画。

CSS中的绝对和相对定位

2 个答案: