Javascript：获取网页的真正中心？

我开始使用$('body').height()和width()，但有时height()返回0。Javascript：获取网页的真正中心？

然后我开始使用$('document').height()和width()，但它受窗口大小的影响。

我想使用document或body的问题在于它们占据了整个窗口空间。我需要的是仅包含不包括边距或填充的内容的第二大矩形...

例如在youtube.com上，当我最大化窗口时，页面内容向左对齐，并且右侧有大量的空白空间。但是，顶部栏（帐户登录和注销）横跨窗口宽度的整个长度。

如何可靠地获取网页的中心而不受当前窗口大小的影响？

对于内容与左侧或右侧对齐的网站，暴露一个很大的空白空间，我如何才能获得真正的中心？

有没有办法让网站的宽度完全适合窗口大小？所以，当我全屏或最大化窗口内容将适合贴合？对于内容不适合的网站而言，如何强制水平滚动条出现在浏览器窗口中呢？

我使用基于webkit/mozilla的浏览器和Chrome来运行javascript。 IE不是问题，因为它永远不会被使用。我也在使用jQuery。

请让我知道，如果我问的是不够清楚，我会做出必要的更改。

来源

2013-12-17 javastudent

尝试使用outerHeight/Width

window.outerHeight; 
window.outerWidth;

这将带窗口的高度/宽度，所以当它调整大小的值也将调整。

请参阅此链接之间的内/外What is the difference between window.innerWidth window.outerWidth?

来源

2013-12-17 06:49:48

我不完全确定你在问什么。

如果要将容器对齐可用空间的中心，请使用margin auto;。
如果您想让网站与较小的屏幕尺寸兼容，请参阅响应式设计和相关的media queries。
$("body").height()不应该返回0。把这个在你的CSS：

HTML，身体{ 宽度：100％; 身高：100％; }

来源

2013-12-17 06:49:10

基本上我想要在页面的中间没有包含边距或填充（空白空间）以获得实际内容的牛眼... ....或者以某种方式更好地展开页面的内容以适应页面的宽度（所以摆脱保证金和填充？） – javastudent

你想用window.outerHeight和window.outerWidth为窗口的“当前”维度的差异。该中心将是该数字除以2.
但是...如果它是一个iFrame里面的内容，你应该使用这个代替：

$(document).outerWidth(); 
$(document).outerHeight();

您也提到，要对齐东西到窗口的中间。对于您可以试试这个：

// let 'obj' be a variable that holds DIV 
// with style="display:inline-block; position:absolute" 
// this function would center an element just like "modals" do 
function centerElement(obj) { 
    $(obj).css({ 
     left: ($(document).outerWidth() - $(obj).outerWidth())/2, 
     top: ($(document).outerHeight() - $(obj).outerHeight())/2 
    }); 
} 

// this will 'adjust the position' of the element 
$(window).resize(function() { 
    centerElement($('#my-centered-div')); 
}); 

// this will trigger the event for the first time 
$(window).resize();

你可以看到一个工作示例与此的jsfiddle：http://jsfiddle.net/4xkSq/2/

有只使用CSS的另一种方式，如果你的元素有一个固定大小：http://jsfiddle.net/82VZe/

来源

2013-12-17 07:25:42 Goodwine

Javascript：获取网页的真正中心？

回答

相关问题