我想为文档的主页 DIV 元素设置一个填充，以便 padding + width (页面 Div 元素) = Device-Width
我想设置 10px 的内边距，并希望页面元素占据剩余的设备宽度。
问题是即使设置了填充，页面元素的宽度 ( 100% ) 与设备宽度相同。
我有以下东西-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<style>
#page1
{
padding:10px;
}
</style>
<script src="jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
</div>
</body>
</html>
现在，假设设备宽度为 480px “page1”的宽度为 480px - 我想让它的宽度为 460px(即不包括 20px 的填充) 通常，如果设备宽度为 n，那么我希望页面 div 的宽度为“n - 20”
“page1”采用相同宽度的原因是因为 jquery-mobile css 将宽度指定为 100%(在 ui-page css 类中)
我尝试通过这样做来覆盖它
\#page1
{
width:auto;
}
但这样做会导致页面占用不正确的宽度——基于子宽度的宽度；
我无法在 css 中以百分比指定宽度，因为我事先没有设备宽度，而且我没有以百分比表示的填充 - 否则如果填充为 5%，那么我可以将宽度指定为 90%，因为它是 10px硬编码，我无法为页面元素指定百分比。
通常，width = auto 的 div(这是一个 block 元素)会导致 div 占用等于其父宽度的空间，不包括其填充/边距/边框 - 但 wrt“页面”(内部是一个 DIV 元素) 似乎并非如此 -
关于如何让它工作的任何想法？
谢谢，
最佳答案
一个建议是使用 Modernizr 来检测最大设备宽度或最大宽度:
if (Modernizr.mq("screen and (max-width: 480px)")) {
// set width of page class = 480-n
}
.. settings for other common screen widths ..
此解决方案的主要问题是它不是任意的，因此您需要为您想要支持的每个设备编写一个案例。测试 window.screen.width 可能更适合您的目的。
关于html - jquery 手机 : set padding to main page Div element so that padding + width = device-width，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13844530/