jQuery的100％Div高度

我在设置我的Div到100％的窗口时遇到了一些麻烦，并且希望能够帮助解决这个问题。jQuery的100％Div高度

这里是简写的HTML ...

<div id="full-slider-wrapper"> 
    <div id="full-slider"> 
    <div class="slide-panel active"> 
     CONTENT 
    </div> 
    </div> 
</div>

这里是相关的CSS：

/*SLIDER 
=================================== 
*/ 

#full-slider-wrapper { 
    overflow: hidden; 
} 

#full-slider { 
    position: relative; 
    width: auto; 
    min-height: 1250px; 
    margin: 0 auto; 
} 

#full-slider .slide-panel { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: auto; 
    visibility: hidden; 
} 

#full-slider .slide-panel.active { 
    visibility: visible; 
    }

我一直在使用最小高度：1250px;作为一种解决方法，但我使用SKELETON主题，当我调整窗口大小时，内容会缩小，并且在内容和页脚之间留下大量空白空间。

我知道有很多类似的问题，但我似乎无法得到任何解决方案的工作。这似乎是我最好的选择是利用一些jQuery的象下面这样：

$(function() { 
    $(window).resize(function() { 
     $('div:full-slider').height($(window).height() - $('div:full-slider').offset().top); 
    }); 
    $(window).resize(); 
});

可惜我不是很精通jQuery和每当我试图实现上述或类似的东西，我的内容消失。

在此先感谢您的帮助！

来源

2013-01-10 dq7133

'HTML，身体，＃全滑盖包装，＃全滑盖{身高：100％}' –

百分比高度不会工作，除非所有的父母（祖先）已经定义了高度，所以加：

html, body, #full-slider-wrapper, #full-slider { height:100%; }

同时添加height:100%到#full-slider-wrapper如有其他所有祖先。

当然，如果你有一个页脚，你将不得不平衡高度来为页脚留出空间，例如， #full-slider-wrapper { height:90%; }。

来源

2013-01-10 21:24:30

我想这，但内容不会出现。我刚刚收到了页眉和页脚。 – dq7133

请提供小提琴来演示此问题，否则很难调试您的页面。如果您在所有具有％高度子项的元素上设置了定义的高度，它应该可以正常工作。 –

像这样的情况很好，使所有的位置都是绝对的，但是命名所有四个位置。例如：

#full-slider { 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
}

这个特殊的会强制$ full-slider到其父项的边缘，但逻辑适用于所有的东西。想要50px的页脚高度？做底部：50px。根据需要更改。

来源

2013-01-10 21:59:23 PlantTheIdea

我可以调整“顶部”来计算我的标题，但调整“底部”对我的页脚相对于内容的位置没有影响。页脚停留在页面的中间，并且内容覆盖它。 – dq7133

-1

试试这个：

$('element').css('height','100vh');

或本：

.element_class{ 
    height:100vh; 
}

来源

2017-08-10 22:36:33 catbadger

这不提供问题的答案。要批评或要求作者澄清，请在其帖子下方留言。 - [来自评论]（/ review/low-quality-posts/16999211） – manish

jQuery的100％Div高度

回答

相关问题