Slidingowned元素的高度

我有一个网格，我有它的绝对定位框。这些盒子有一个头部和一个隐藏的页面部分......当我点击一个按钮时，所有的盒子都会隐藏起来，所选择的盒子会变成100％宽，隐藏的页面会滑落到屏幕上。我的问题是，我的网站下的部分网格（我的页脚）被隐藏的下滑页面，因为网格的高度不下降网站的下降部分... 我不能给定高度网格，因为不同的内容是可变的...我NOTR明白为什么我的相对定位网格的高度不是由系统计算...Slidingowned元素的高度

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/

来源

2016-01-02 Igor Laszlo

只是下面的一个

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}

并检查它是否是根据自己的需要与否。告诉我进一步修改。

来源

2016-01-02 06:14:17

谢谢，但正如我所说我不能改变CSS太多...我不仅有一个.box，但许多盒无线绝对位置，因为这是一个网格。你提出了与顶部和左侧属性相对的框位置，它不会工作...这就是为什么我问是否有jQuery解决方案... css技巧也可以，但对不起，你的不工作... –

I改变小提琴更好的理解...：https：//jsfiddle.net/zcubarw7/6/ –

没有必要担心....我没有设置任何参数作为固定值，所以你可以在任何情况下使用它。 –

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

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

来源

2016-01-02 16:56:42

Slidingowned元素的高度

回答

相关问题