![](/img/trans.png)
[英]Adjusting Table Column Width using iText Library in JavaScript, xPages
[英]Adjusting width of page using Javascript
我的页面具有以下结构:
<container>
<header>
<main-content>
<footer>
</container>
我正在使用javascript
通过以下代码调整容器的宽度:
function getPageSize() {
var de = document.documentElement;
var w = window.innerWidth || self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
var h = window.innerHeight || self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
arrayPageSize = [w, h];
return arrayPageSize;
}
$(document).ready(function () {
var page = getPageSize();
var x = page[0];
var y = page[1];
$("#container").css({width: (x) + 'px'});
编辑
现在,我正在使用滑块[将div
设置为宽度9999em
并在其中插入滑块元素]。当浏览器窗口最大化时,页面打开正常。
有没有更好的方法来实现这个不同的分辨率设备,所以当我按(Ctrl)+(-)
,页面保持变小显示其他screens
。 如何在不泄露其他screens
情况下使页面保持在中间位置。
这是图像:
我尝试过的一件事是 :如果我在px
设置container
元素的宽度,我会得到所需的结果。 但是,我无法预先设置container
的宽度(我使用( $(window).width()
)设置的宽度,因为它取决于不同的设备。
关于什么:
width: auto
要么
width: 100%
因为它是你网页的大多数父容器...
在对问题进行编辑之后:要使容器始终“居中”而不是左对齐,您可以使用:
margin: auto
使container
始终位于中心位置..
怎么样:
$(window).resize(function() {
var pageSize= $(window).width();
$("#container").css({width: (pageSize) + 'px'});
});
你应该看看一些责任的CSS框架,它们可以为各种设备解决这样的问题。 一个例子是Bootstrap(现在非常流行),但还有其他一些。
无论如何,当我想在Javascript / jQuery中进行绝对控制时,我保持事物的方式就是:
var desiredWith = x;
var pad = ($(window).width() - desiredWidth) / 2;
$(selector).css({position: 'absolute', left: pad, right: pad, width: auto;});
这并不总是(通常?)在一些旧的浏览器中工作,但我在一家没有针对它们的公司工作,所以我不能告诉你哪些会破坏。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.