我有一个基本的网站很长，大部分是文字内容:
HTML简化如下:
<body>
<div class="content" id="01">
<p>LONG TEXT</p>
</div>
<div class="content" id="02">
<p>LONG TEXT</p>
</div>
</body>
另外40个id也是如此。
CSS像这样查找这些部分:
.content {
max-width: 600px;
min-width: 240px;
margin: 0 auto;
}
所以内容div按浏览器窗口/视口的比例缩小。这最后把我们带到我的问题:
每当我缩小浏览器窗口的宽度时，内容div的宽度也会缩小，因此内容本身会变长，或者应该说是变高。这将导致当前内容焦点向下移动的情况。当移动设备从横向方向切换到纵向方向或反之亦然时，这尤其糟糕。
我现在正试图找到解决方案，缩放内容的高度上下，保持当前垂直焦点在屏幕上。有人知道如何在HTML, CSS或JS中做到这一点吗?内容div有唯一的id，单div不是很长，所以我想，至少与JS这应该是可能的，通过某种方式跟踪当前显示的id?
我希望我能明白这一点，虽然英语不是我的母语。
谢谢。
我认为你应该做的是将<p>的宽度固定为div.content的最小宽度，这样它永远不会改变它的宽度，但是父<div>会根据当前的方向改变它的宽度。
您可以在这里看到一个示例:http://jsfiddle.net/dyjXC/1/
CSS:body{ width: 300px; } /* portrait or landscape */
div.content
{
max-width: 600px;
min-width: 240px;
background: salmon;
border-bottom: 1px solid green;
}
div.content > p
{
text-align: center; /* I centered both the text and... */
margin: 0px auto; /* ... the p itself, but you can use default to left */
width: 240px;
background: lightgray;
}