2

我有一个基本网站，其中包含很长的大部分文本内容：

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 来实现？

我希望我对此有所了解，而英语不是我的母语。

谢谢。

4

1 回答 1

0

我认为你应该做的是将<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;
}

我希望它能按预期工作。

于 2013-04-20T19:35:40.147 回答