jquery 调整大小，使内容始终完美居中答案

【问题标题】：jquery resize so content is always centered perfectlyjquery 调整大小，使内容始终完美居中
【发布时间】：2016-01-23 16:51:13
【问题描述】：

我现在有以下，但并不完美：

$(window).resize(function () {
    $("#app-views").height($(window).height() - 140);
});

基本上，在我的内容开始之前，我距离顶部有 75px，从页面底部到我的内容有 60px。

如何做到这一点，以便在我调整窗口大小时，它始终尊重这些尺寸？我正在使用 malihu 滚动条，并将我的视图加载到#app-views 中。

我在窗口周围有一个边框 (10px)、一个导航栏 (50px) 和 15px 的填充直到我的身体。然后，我在 body 上有 15px 的底部填充，一个高度为 35px 的页脚和 10 px 的底部边框。

这是基本的 HTML：

【问题讨论】：

可以在 Question 中包含 html 、 css 吗？ , 创建 stacksn-ps , jsfiddle jsifiddle.net 演示？
是否要求#app-views 在视口中居中？

标签： javascript jquery html css

【解决方案1】：

如果您希望放置内容并调整其大小，同时与窗口的顶部和底部保持相同的距离，则不必使用 jQuery 或 Javascript。只有 CSS 可以解决问题。试试这个在你的样式代码中不带height属性：

#app-views {
    position: fixed;
    top: 75px;
    bottom: 60px
}

您可以设置left 和right 而不设置width 以获得相同的水平尺寸效果。

【讨论】：

谢谢。我现在知道 jquery 偏移量，但我会使用这个解决方案，因为它更容易。谢谢

【解决方案2】：

您说您有特定的衡量标准来将您的内容放在页面上

（在我的内容开始之前距离顶部 75 像素，距离底部 60 像素页面）

使用jQuery offset，您可以获得元素的顶部位置，您还可以在屏幕调整大小时更新 css 顶部位置，以便您的内容在调整大小时始终调整其位置。

要查看内容元素的底部在哪里，您可以找到内容顶部的偏移量并添加内容的高度以获得内容相对于页面顶部的底部位置。

【讨论】：

非常感谢。现在我知道了一些新的东西！我能够让它与它一起工作，但我最终使用了 css 选项。谢谢你

【解决方案3】：

我建议在 CSS 中执行此操作，也许通过动态更改 jQuery 对象的 CSS 属性。我会用一个简单的 CSS 选择器来处理它。即使调整窗口大小，这也有效。看看：

#app-views {
    position: absolute; /*this will allow you to position it exactly where you want it*/
    left: 50%; /*this will move the left side of the container halfway across the page*/
    transform: translateX(-50%); /*moves the container left by half its width,
    so that the centre of the container aligns with the center of the page*/

}

您可以使用 'top' 属性和 'translateY()' 调整垂直位置，就像我使用 transform 和 translateX() 演示的那样。

如果你想使用 jQuery，你可以试试：

#('app-views').css('position', 'top');

此外，我还建议您不要为各种屏幕尺寸保留页面顶部的 75 像素。 75px 可能适用于台式机，但不适用于移动设备。如果您确实打算让您的网站完全支持移动设备，那么首先设计移动布局通常是一个好主意，因为它往往更简单。然后，您可以使用媒体查询针对桌面进行调整。它确实非常出色。我以前自己用过很多次。您可以在此处了解更多信息：

MediaQuery CSS

【讨论】：