Question

我有一个用例，我希望保持跨度（或div，或其他）的高度响应屏幕大小。此外，在这个跨度之上会有一个具有固定高度的标题（我的意思是我希望即使屏幕高度发生变化也要保持固定高度）。

在上面的plunker：

绿色范围绝不能超出黑色边界范围。
紫色div的高度不得小于plunker的高度。
滚动条必须只出现在绿色div中。
当屏幕尺寸减小时，绿色div的高度应自行调整。
标题必须始终位于顶部。

代码：

<!DOCTYPE html>
<html style="border:1px solid red;height:90%">
<head>
<style>

    .black{
    border:1px solid black;
    height:70%;
    display:block;
    }

</style>
</head>
<body style="height:100%">
    <span class="black">
        <span style="display:block;border:1px solid purple;height:15%;min-height:70px;">
            Fixed Header - purple color <br>height givnen  15% <br> and min height also set
        </span>
        <span style="margin-top:2%;border :1px solid green;display: block;overflow:scroll;height:75%">
        <ul>
            <li>Responsive body</li>
            <br>
            <li>Should never go out of the black boder span</li>
            <br>
            <li>should be responsive acccording to the height of the body</li>
            <br>
            <li>Item4</li>
            <br>
            <li>Item5</li>
            <br>
            <li>Item6</li>
            <li>Item7</li>
            <br>
            <li>Item8</li><li>Item1</li>
            <li>Item9</li>
            <li>Item10</li>
            <li>Item11</li>
            <li>Item7</li>
            <br>
            <li>Item8</li><li>Item1</li>
            <li>Item9</li>
            <li>Item10</li>
            <li>Item11</li>
        </ul>
        </span>
    </span>
</body>
</html>

请注意：我不想将JavaScript用于任何动态大小调整

最佳做法帮助：

是否可以将高度和百分比分配给HTML和正文（就像我试图在plunker中做的那样），以达到高度响应的目的？

Answer 1

由于为标题声明了最小高度，因此将确保标题的最小高度为70px，与屏幕大小无关。

我不清楚你是否意味着即使滚动其他内容时标题仍应固定在其位置？或标题应与内容一起移动？
要确保标题始终保持在顶部，但在整体移动时可以为css代码添加定位。即.black类{position:absolute;}和标题范围{position:relative;top:0px;left:0px;}

但要将标题固定在同一位置，您只能将position:fixed;top:0px;left:0px;添加到标题范围。

是高度以百分比的形式给予各个班级以确保回应。

我怎样才能让我的身高响应？

1 个答案: