如何动态调整CSS内容区域的大小,没有javascript

Question

如何动态调整CSS内容区域的大小,没有javascript

我想要的是:

当浏览器窗口调整大小时,蓝色区域会调整大小.
标题是可见的.
蓝色区域从标题结束处开始(不在标题后面或上方).
蓝色区域在页脚之前结束.
蓝色区域和页脚之间存在5个黄色像素.

这只能用CSS和HTML(没有任何javascript)吗？

<!doctype html>
<html lang="en-US">
<head>
    <meta charset="utf-8"/>
    <title>Test</title>

    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
    <style>

    *{
        margin:0px;
        padding:0px;
    }

    header, nav, article, footer, address {  
        display: block;  
    }

    header{
        position:relative; height: 50px; background-color:#2b2b2b;
    }

    footer{
        height: 50px; 
        width:100%; 
        bottom: 0px; 
        position: fixed; 
        background: red;
    }

    #explorer{
        position:relative; bottom:55px; 
    }

    #sections{
        width: 100%; height: 100%; bottom: 55px; position:fixed; background: blue;
    }

    </style>
</head>

<body style="background-color:yellow">
    <header >
        <h1>Test</h1>
    </header>
  <div id="explorer" >
      <div id="sections" >
   &nbsp;
      </div>
  </div>
  <footer>
       /* Footer Content */
  </footer>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 5

我认为Kit的代码只需要一次调整即我们必须删除高度:100%来自div 部分它会正常工作.同时在测试以下代码时,我注意到如果我们将高度降低到超出限制,则页脚实际上位于标题之上.虽然,实际上高度永远不会那么低,但你仍然可能想要将z-index:5000添加到标题标签中

归档时间：	14 年，8 月前
查看次数：	13015 次
最近记录：	14 年，8 月前