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

只需将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}

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

Answer 2

好吧，我没有找到任何答案，我试着追加，我尝试克隆，我有一个实际（高度）插件，但没有任何帮助...所以我不得不改变结构...

我从网格中取出页面，就像这样，我知道它的确切高度（盒子的高度为像素）。由于盒子是绝对定位的，我把一个假的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/

滑动的元素高度

2 个答案: