我怎样才能让我的身高反应？答案

【问题标题】：How can I make my height responsive?我怎样才能让我的身高反应？
【发布时间】：2014-09-07 01:36:06
【问题描述】：

我有一个用例，我想保持跨度（或 div 或其他）的高度对屏幕尺寸做出响应。此外，在这个跨度之上会有一个固定高度的标题（我的意思是即使屏幕高度发生变化，我也想保持它的固定高度）。

我做了一个plunker来说明：链接：plunker responsive height

在上面的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 中尝试做的那样）以实现高度响应？

【问题讨论】：

我没有完全理解你的第五点。 “始终保持在顶部”是指像 this site 上的黄色框保持在右下角吗？
另外，不要使用<span>，然后将其设置为display:block，而是使用<div>
所以它是跨度（或 div 或其他）的高度，而不是标题中的您自己的高度 :)
@parchment ：不 - 我的意思是滚动只会出现在绿色区域，而不是整个 body/html/outermost span。
@Paulie_D 我知道 :)。

标签： html css responsive-design height

【解决方案1】：

由于为 header 声明了 min-height，因此将确保 header 的最小高度为 70px，与屏幕尺寸无关。

我不清楚您的意思是否即使滚动其他内容，标题也应保持固定在其位置？还是标题应该与内容一起移动？
为确保标题始终保持在顶部，但在整体时移动，您可以将定位添加到您的 css 代码。即 .black 类 {position:absolute;} 和标题跨度 {position:relative;top:0px;left:0px;}

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

是的，高度以百分比形式分配给各个班级，以确保响应能力。

【讨论】：