向下滑动的元素高度

Question

我有一个网格，里面有绝对定位的框。这些盒子有一个头部和一个隐藏的页面部分......当我点击一个按钮时，所有的盒子都将被隐藏，所选的盒子变成 100% 宽，它的隐藏页面向下滑动显示。 我的问题是我的网站在网格下方的部分（我的页脚）被向下滑动的页面隐藏了，因为网格的高度不会压低网站的下部... 我无法为网格提供固定高度，因为不同的内容会有所不同...我不明白为什么系统不计算我的相对定位网格的高度...

HTML 结构：

<div class="container">
    <div class="header">
        <button class="showclick">Show</button>
        <button class="hideclick">Hide</button>
    </div>
    <div class="grid">
        <div class="box">
            <div class="box-head"></div>
            <div class="page"></div>
        </div>
    </div>
    <div class="footer">This is my footer which should be under the slide-downed (shown) page</div>
</div>

我想问题出在我的 CSS 上。但是由于系统复杂，我不确定我可以在其中更改定位和溢出...

body {position:relative;display:block;max-width:800px;min-height:101vh; margin:0 auto;overflow-x:hidden}
.content {position:relative;display:block;width:100%;padding:5%;background:blue}

.header {position:relative;display:block;width:100%;background:orange}
.showclick, .hideclick {position:relative;width:20%;height:30px}

.grid {position:relative;display:block;min-height:500px;background:grey}
.grid:after {content:'';display:block;clear:both}
.box {position:absolute;left:0;top:0;width:100%;height:200px;color:#fff;background:#a2c5bf}
.box-head {position:relative;display:block;width:100%;height:200px;background:red;overflow:hidden}
.page {position:relative;width:100%;height:auto;padding:5%;background:yellow}

.footer {position:relative;display:block;width:100%;text-align:center;background:green}

是否可以通过单击按钮使用 jquery 计算网格（或页面）高度？

小提琴在这里：https://jsfiddle.net/igorlaszlo/zcubarw7/1/

Answer 1

好吧，我没有找到任何答案，我尝试了附加，我尝试了克隆，我得到了一个 actual(height) 插件，但没有任何帮助......所以我不得不改变结构...

我从网格中取出页面，像这样我知道它的确切高度（框的高度以像素为单位）。由于盒子是绝对定位的，我在它们“下方”放置了一个与网格精确高度相同的假 div。

页面显示隐藏在网格下/页脚之前...

HTML

<div class="container">
    <div class="header">
        <button class="showclick">Show</button>
        <button class="hideclick">Hide</button>
    </div>
    <div class="grid">
        <div class="box">
            <div class="box-head"></div>
        </div>
    </div>
    <div class="page"></div>
    <div class="footer">This is my footer which should be under the slide-downed (shown) page</div>
</div>

CSS（仅更改）

.grid {position:relative;display:block;background:grey}/*no min-height*/
.grid:after {content:'';display:block;clear:both}
.fake {position:relative;display:block;width:100%;height:200px}/*new element*/

小提琴：https://jsfiddle.net/igorlaszlo/zcubarw7/7/

Answer 2

只需将您的 CSS 代码替换为以下代码即可

CSS：

body {
    display:block;
    position:relative;
    max-width:800px;
    min-height:101vh;
    margin:0 auto;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    text-size-adjust:100%;
    background:#fff
}
.content {position:relative;display:block;width:100%;padding:5%;background:blue}

.header {position:relative;display:block;width:100%;background:orange}
.showclick, .hideclick {position:relative;width:20%;height:30px}

.grid {position:relative;display:block;background:grey}
.grid:after {content:'';display:block;clear:both}
.box {position:relative;left:0;top:0;width:100%;height:100%;color:#fff;background:#a2c5bf}
.box-head {position:relative;display:block;width:100%;height:200px;background:red;overflow:hidden}
.page {position:relative;width:100%;height:auto;padding:5%;background:yellow}

.footer {position:relative;bottom:0;display:block;width:100%;text-align:center;background:green}

并检查它是否符合您的需要。告诉我进一步修改。