Html 如何使用CSS动态调整内容区域大小而不使用javascript_Html_Css

Html 如何使用CSS动态调整内容区域大小而不使用javascript

html css

Html 如何使用CSS动态调整内容区域大小而不使用javascript,html,css,Html,Css,我想要的是：当浏览器窗口调整大小时，蓝色区域将随之调整大小标题是可见的蓝色区域从收割台结束的位置开始（不在收割台后面或上方）蓝色区域在页脚之前结束在蓝色区域和页脚之间存在5个黄色像素这是否只适用于CSS和HTML（没有任何javascript）试验 *{ 边际：0px；填充：0px； } 页眉，导航，文章，页脚，地址{ 显示：块； } 标题{ 位置：相对；高度：50px；背景色：#2b2b； } 页脚{ 高度：50px；宽度：100%；底部：0px；位置：固定；背景

我想要的是：

当浏览器窗口调整大小时，蓝色区域将随之调整大小
标题是可见的
蓝色区域从收割台结束的位置开始（不在收割台后面或上方）
蓝色区域在页脚之前结束
在蓝色区域和页脚之间存在5个黄色像素

这是否只适用于CSS和HTML（没有任何javascript）


试验
*{
边际：0px；
填充：0px；
}
页眉，导航，文章，页脚，地址{
显示：块；
}
标题{
位置：相对；高度：50px；背景色：#2b2b；
}
页脚{
高度：50px；
宽度：100%；
底部：0px；
位置：固定；
背景：红色；
}
#探险家{
位置：相对；底部：55px；
}
#部分{
宽度：100%；高度：100%；底部：55px；位置：固定；背景：蓝色；
}
试验
/*页脚内容*/

像这样吗

<html>
<head>
    <meta charset="utf-8"/>
    <title>Test</title>
    <style type="text/css">

    html, body, h1 {
        margin:0px;
        padding:0px;
    }

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

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

    footer{
        height: 50px; 
        width:100%; 
        bottom: 0px; 
        position: fixed; 
        background: red;
        border-top: 5px solid yellow;
    }

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

    #sections{
        width: 100%;
        height: 100%;
        bottom: 55px;
        position:fixed;
        top: 50px;
        background: rgba(0,0,256,.5);
    }

    </style>
</head>
<body>
    <header >
        <h1>Test</h1>
    </header>
    <div id="explorer" >
        <div id="sections" >
        &nbsp;
        </div>
    </div>
    <footer>
        /* Footer Content */
    </footer>
</body>


试验
html，body，h1{
边际：0px；
填充：0px；
}
页眉，导航，文章，章节，页脚，地址{
显示：块；
}
标题{
位置：相对位置；
高度：50px；
宽度：100%；
背景色：#2b2b；
}
页脚{
高度：50px；
宽度：100%；
底部：0px；
位置：固定；
背景：红色；
边框顶部：5px纯黄色；
}
#探险家{
位置：相对；底部：55px；
}
#部分{
宽度：100%；
身高：100%；
底部：55px；
位置：固定；
顶部：50px；
背景：rgba（0,0256,5）；
}
试验
/*页脚内容*/

我认为Kit的代码只需要一次调整&那就是我们必须将高度从sections div中删除：100%&它可以正常工作。另外，在测试下面的代码时，我注意到，如果我们将高度降低到某个限制之外，页脚实际上会位于页眉上方。虽然，实际上高度永远不会这么低，但您仍然可能希望将z-index:5000添加到标题标记中

查看CSS媒体查询。。。我知道它会随着窗口大小的变化而变化。我刚刚在@Peter上回答了一个类似的问题-谢谢你的提示，但这并不能解决这个问题。不，蓝色区域必须在页脚之前结束。&代码烧录。。。你能公布这个问题的解决方案吗？我对代码很感兴趣：）Kit已经发布了代码，您只需要从sections div中删除高度：100%。

<html>
<head>
    <meta charset="utf-8"/>
    <title>Test</title>
    <style type="text/css">

    html, body, h1 {
        margin:0px;
        padding:0px;
    }

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

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

    footer{
        height: 50px; 
        width:100%; 
        bottom: 0px; 
        position: fixed; 
        background: red;
        border-top: 5px solid yellow;
    }

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

    #sections{
        width: 100%;
        height: 100%;
        bottom: 55px;
        position:fixed;
        top: 50px;
        background: rgba(0,0,256,.5);
    }

    </style>
</head>
<body>
    <header >
        <h1>Test</h1>
    </header>
    <div id="explorer" >
        <div id="sections" >
        &nbsp;
        </div>
    </div>
    <footer>
        /* Footer Content */
    </footer>
</body>