Php 自动调整大小<；部门>；视图端口/窗口中剩余空间的高度_Php_Css_Html

Php 自动调整大小<；部门>；视图端口/窗口中剩余空间的高度

php css html

Php 自动调整大小<；部门>；视图端口/窗口中剩余空间的高度,php,css,html,Php,Css,Html,我有以下HTML代码： <html> <BODY> <DIV ID="holder"> <DIV ID="head_area">HEAD CONTENT GOES HERE....</DIV> <DIV ID="main_area">BODY CONTENT GOES HERE</DIV> <DIV ID="fo

我有以下HTML代码：

<html>
    <BODY>
        <DIV ID="holder">
            <DIV ID="head_area">HEAD CONTENT GOES HERE....</DIV>
            <DIV ID="main_area">BODY CONTENT GOES HERE</DIV>
            <DIV ID="foot_area">FOOT CONTENT GOES HERE...<>
        </DIV>
    </BODY>
</HTML>

在CSS中将

#头#u区

和

#脚#u区

放置到位后，我应该如何在CSS中设置

#主#u区

高度以占据剩余空间，屏幕分辨率独立。。。换句话说，

#head_区域

和

#foot_区域

在默认情况下始终可见，但在缩放（'ctrl'+'）时，它应该像往常一样移出窗格

谢谢…

使用

height:calc(100% - 65px);

注释来自：

注意：+和-运算符必须始终用空格包围

要使页脚保持在底部，可以将其从包装中取出，例如：

<div id="wrapper">

        <div id="header">
            <div id="logo">
                <h1>Logo Here</h1>
            </div>
        </div>

        <div id="main">
            <div id="content_main"><p>Lorem ipsum dolor sit amet</p></div>
        </div>

</div>

<div id="footer">
    <p>Footer Stays Here Woop Woop</p>
</div>

那么页脚的CSS将类似于：

#footer {
   position:relative;
   height:75px; //the height of the footer
   margin-top:-75px; //pull the footer back onto screen
   width:100%;
   background:#ccc; 
}

JSFIDLE示例

编辑，这里有一个更好的例子（）使用固定的页眉和页脚以及可滚动的中间部分，使用一点jQuery来更改溢出包装的高度（还添加了一些样式）：


* {
保证金：0；
填充：0；
}
html，正文{
身高：100%；
宽度：100%；
溢出x：隐藏；
溢出y：隐藏；
背景：#111；
颜色：#fff；
保证金：0；
}
#包装纸{
宽度：100%；
身高：100%；
最小宽度：415px；
保证金：0；
}
#标题{
宽度：100%；
最小高度：92px；
边框底部：1px实心#2A2A2A；
背景：#0e0e；
盒影：0.14像素rgba（0,0,0,0.4）插入；
}
#收割台h1{
字号：4em；
字号：700；
左边距：10px；
文本阴影：2×2×0#000；
}
#内容包装{
宽度：100%；
}
#主要内容{
位置：相对位置；
身高：100%；
最小高度：100px；
溢出y：自动；
溢出x：隐藏；
填充：0 5px；
}
#页脚{
明确：两者皆有；
位置：相对位置；
利润上限：-30px；
高度：30px；
左边距：自动；
右边距：自动；
宽度：100%；
边框顶部：1px实心#2A2A2A；
背景：#0e0e；
盒影：0.14像素rgba（0,0,0,0.4）插入；
填充：0 5px；
}
#页脚p{
文本对齐：居中；
垫面：4px；
}
/*示例使文本变大，以显示侧栏*/
#content_main{字体大小：200%}
$（函数（）{
$（窗口）。调整大小（函数（）{
$（'content_main'）.height（$（window.height（）-120）；
});
$（'content_main'）.height（$（window.height（）-120）；
});
乱数假文
Lorem ipsum dolor sit amet，是一位杰出的献身者。克拉斯·内克·苏西皮特·里伯。维瓦姆斯努克酒店
智人，佩伦茨克酒后生活，前叶舌。非流苏品种。
大鼠小叶舌。在利古拉吃顿饭，坐在艾美索达莱斯爱神的位子上。
南天妇罗博蒂乌尔纳港。佩伦特斯式的普尔文纳只是一个浮士德，坐在艾米特·特里斯提克
努克·特里斯蒂克。库拉比图尔·阿梅特·阿库姆桑·多洛。维瓦摩斯·欧康多迪亚姆，乌兰科珀·法雷特拉·内克。


Lorem ipsum dolor sit amet，是一位杰出的献身者。克拉斯·内克·苏西皮特·里伯。维瓦姆斯努克酒店
智人，佩伦茨克酒后生活，前叶舌。非流苏品种。
大鼠小叶舌。在利古拉吃顿饭，坐在艾美索达莱斯爱神的位子上。
南天妇罗博蒂乌尔纳港。佩伦特斯式的普尔文纳只是一个浮士德，坐在艾米特·特里斯提克
努克·特里斯蒂克。库拉比图尔·阿梅特·阿库姆桑·多洛。维瓦摩斯·欧康多迪亚姆，乌兰科珀·法雷特拉·内克。


Lorem ipsum dolor sit amet，是一位杰出的献身者。克拉斯·内克·苏西皮特·里伯。维瓦姆斯努克酒店
智人，佩伦茨克酒后生活，前叶舌。非流苏品种。
大鼠小叶舌。在利古拉吃顿饭，坐在艾美索达莱斯爱神的位子上。
南天妇罗博蒂乌尔纳港。佩伦特斯式的普尔文纳只是一个浮士德，坐在艾米特·特里斯提克
努克·特里斯蒂克。库拉比图尔·阿梅特·阿库姆桑·多洛。维瓦摩斯·欧康多迪亚姆，乌兰科珀·法雷特拉·内克。
劳伦斯·切隆的《洛雷姆·伊普苏姆》

由于父容器未设置高度，您的100%高度将无法按您希望的方式工作。您可以将html和body都设置为height:100%，然后按照建议使用calc，但您需要为不支持calc的旧浏览器提供备用选项

您可以使用JavaScript找到窗口高度，然后将#main_区域的高度调整为该测量值减去#head_区域和#foot_区域的高度。您需要在页面加载、窗口大小调整和方向更改时设置此选项

最简单的方法可能是简单地使用绝对定位

#head_area {
    position:absolute;
    top:0;
    height:45px;
}
#main_area {
    position:absolute;
    top:45px;       /* position below header */
    bottom:20px;    /* make room for footer */
    overflow:scroll;
}
#foot_area {
    position:absolute;
    bottom:0;
    height:20px;
}

你这么说

默认情况下，#head#u区域和#foot#u区域始终可见，但处于打开状态缩放（'ctrl'+'+'）它应该像往常一样移出窗格

但这对于使用溢出：滚动的#main_区域来说没有意义。它应该在何时滚动，何时变大（同时仍然滚动溢出？）并将页脚移出视口

这次工作。。。。不知道操作员周围必须有“空格”。。。谢谢Win8 x64上的IE-10被此代码挂起，Firefox Nightly v30.0a1（2014-03-06）不支持…@Anirban:最好使用jquery来完成此操作，当

#main_区域

中的内容超过其可用空间（

#main_区域

）时，它应该滚动（即字体大小为12pt的100行文本）。。。当用户进入特定区域时，应将

#head_区域

和

#foot_区域

推到d窗口内较低的可用空间，以查看放大的文本（头部区域和脚区域不应像wikipedia.cm中的缩放那样覆盖窗格并隐藏放大的文本。侧面板放大占据80%的0f视图，并为主要内容留下一个薄薄的区域……）为什么您没有选择上一个问题的答案？

#footer {
   position:relative;
   height:75px; //the height of the footer
   margin-top:-75px; //pull the footer back onto screen
   width:100%;
   background:#ccc; 
}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
* {
    margin:0;
    padding:0;
}

html,body {
    height:100%;
    width:100%;
    overflow-x:hidden;
    overflow-y:hidden;
    background:#111;
    color:#fff;
    margin:0;
}

#wrapper {
    width:100%;
    height:100%;
    min-width:415px;
    margin:0;
}

#header {
    width:100%;
    min-height:92px;
    border-bottom:1px solid #2A2A2A;
    background:#0E0E0E;
    box-shadow:0 0 14px rgba(0,0,0,0.4) inset;
}

#header h1 {
    font-size:4em;
    font-weight:700;
    margin-left:10px;
    text-shadow:2px 2px 0 #000;
}

#content_wrap {
    width:100%;
}

#content_main {
    position:relative;
    height:100%;
    min-height:100px;
    overflow-y:auto;
    overflow-x:hidden;
    padding:0 5px;
}

#footer {
    clear:both;
    position:relative;
    margin-top:-30px;
    height:30px;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    border-top:1px solid #2A2A2A;
    background:#0E0E0E;
    box-shadow:0 0 14px rgba(0,0,0,0.4) inset;
    padding:0 5px;
}

#footer p {
    text-align:center;
    padding-top:4px;
}
/*example make the text big, to show side bar*/
#content_main{font-size:200%}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(function(){
    $(window).resize(function() {
        $('#content_main').height($(window).height() - 120);
    });
    $('#content_main').height($(window).height() - 120);
});
</script>
</head>

<body>

<div id="wrapper">
    <div id="header">
        <h1>Lorem ipsum</h1>
    </div>
    <div id="content_wrap">
        <div id="content_main">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec suscipit libero. Vivamus nunc 
        sapien, pellentesque vitae dui id, pretium volutpat ligula. Proin varius eros non fringilla tincidunt.
        Cras dignissim ligula molestie lobortis placerat. Donec at imperdiet ligula, sit amet sodales eros.
        Nam tempus lobortis urna ut porta. Pellentesque pulvinar justo ac est faucibus, sit amet tristique 
        nunc tristique. Curabitur sit amet accumsan dolor. Vivamus eu commodo diam, ullamcorper pharetra neque.
        <br>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec suscipit libero. Vivamus nunc 
        sapien, pellentesque vitae dui id, pretium volutpat ligula. Proin varius eros non fringilla tincidunt.
        Cras dignissim ligula molestie lobortis placerat. Donec at imperdiet ligula, sit amet sodales eros.
        Nam tempus lobortis urna ut porta. Pellentesque pulvinar justo ac est faucibus, sit amet tristique 
        nunc tristique. Curabitur sit amet accumsan dolor. Vivamus eu commodo diam, ullamcorper pharetra neque.
        <br>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec suscipit libero. Vivamus nunc 
        sapien, pellentesque vitae dui id, pretium volutpat ligula. Proin varius eros non fringilla tincidunt.
        Cras dignissim ligula molestie lobortis placerat. Donec at imperdiet ligula, sit amet sodales eros.
        Nam tempus lobortis urna ut porta. Pellentesque pulvinar justo ac est faucibus, sit amet tristique 
        nunc tristique. Curabitur sit amet accumsan dolor. Vivamus eu commodo diam, ullamcorper pharetra neque.
       </div>
    </div>
</div>
<div id="footer">
    <p>Lorem ipsum By Lawrence Cherone</p>
</div>

</body>
</html>

#head_area {
    position:absolute;
    top:0;
    height:45px;
}
#main_area {
    position:absolute;
    top:45px;       /* position below header */
    bottom:20px;    /* make room for footer */
    overflow:scroll;
}
#foot_area {
    position:absolute;
    bottom:0;
    height:20px;
}