jquery - 如何在 html 和 css 中居中 div，始终保持纵横比，并填充最大屏幕宽度/高度？

Question

我似乎无法使用 html 和 css 实现以下设置。我需要3个div：

• 标头（固定高度）
• 页脚（固定高度）
• 内容（固定纵横比，必须居中并且必须“尽可能大”）

我有一本书（一张图片），我希望它尽可能大。我打算放置作为内容 div 的背景图像。

我制作了这个模型以使事情变得清晰：

任何人都知道我怎么能意识到这一点？

Answer 1

您可以使用 jquery 设置页面的高度

$(function()
  {
  $('.fullLength') .css({'height': (($(window).height()) -72)});
    $(window).bind('resize', function(){
    $('.fullLength') .css({'height': (($(window).height()) -72)});

  });        
});

对于宽度，只需将其设置为百分比，然后使用 css with margin: 0 auto

我在这里添加了一个小提琴 http://jsfiddle.net/ktcle/G3G4x/

Answer 2

您可以尝试使用超大插件。

这是如何将页脚保持在页面底部的链接。

Answer 3

你可以用 HTML 和 CSS 做到这一点，就像我制作的 jsfiddle 一样：http: //jsfiddle.net/QBB4j/

HTML：

<header>
    Header, fixed height
</header>

<div id=main>
    <div id=book>
        <img src="myimage.png" />
    </div>
</div>

<footer>
   Footer, fixed height
</footer>

CSS：

header {
    height: 30px;
    background: red;
    margin-bottom: 30px;
}
#book img {
    width: 80%;
    height:80%;
    margin: auto;
}
footer {
    height: 30px;
    background: red;
    margin-top: 30px;
    position:absolute;
    bottom:0;
    width:100%;
}