最小高度 CSS 属性在使用 PHP ob_start() 缓冲输出时不起作用


min-height CSS property doesn't work while buffering output with PHP ob_start()

我实际上正在使用MVC结构处理一个PHP项目,包括DOCTYPE和HEAD标签,在使用ob°start()的输出缓冲期间通过单个文件。

当我想为 may 页面容器声明一个最小高度属性时,问题就来了,以便将页脚粘贴在页面的 bottem 上。 ob_start() -- ob_get_clean() 的使用似乎禁止浏览器及时访问这些属性,因此它们无法评估高度值。

这是我的索引.php文件:

<?php
include_once('global/init.php');
ob_start();
if(isset($_GET['module'])){
    $module = dirname(__FILE__).'/modules/'.htmlspecialchars($_GET['module']).'/';
    $action = (isset($_GET['action'])) ? htmlspecialchars($_GET['action']).'.php' : 'index.php';
    if(!file_exists($module.$action)){
        include('global/home.php');
    }else{
        include($module.$action);
    }
}else{
    include('global/home.php');
}
$content = ob_get_clean();
include_once('global/header.php');
echo $content;
include_once('global/footer.php');

header.php 文件包含 doctype 和 HTML 的第一个基础知识:

<html>
<head>
    <meta charset='UTF-8' />
    <title><?php echo "LiveSession".' '.DOMAIN_INFOS;?></title>
    <meta name='description' content='<?php echo $_SESSION['currentDesc'];?>' />
    <meta name='keywords' content='<?php echo $_SESSION['currentKWds'];?>' />
    <link rel='stylesheet' media='screen and (max-width:480px)' href='css/smartphones.css' />
    <!-- TABLETS -->
    <script type='text/javascript' src='scripts/jquery.1.7.js'></script>
    <script type='text/javascript' src='scripts/poll_edit.js'></script>
    <script type='text/javascript' src='scripts/smartphones.js'></script>
</head>
<body>
    <div id='page'>
        <div id='header'>
            <h1><a href='index.php'>InteractivePollSession</a></h1>
            <?php
                if(is_connected_user()){
                    echo "<span id='disconnector'><a href='index.php?module=members&amp;action=dscnx' title='disconnect'>Disconnect</a></span>";
                }
            ?>
        </div>
        <div id='contentWrap'>

页脚:

            </div>
        <div id='footer'>
            <span id='central-footer'>&copy; <a href='http://www.jsteitgen.com'>JSTeitgen</a></span>
        </div>
    </div>
</body>

还有一个基本的 css 示例:

body{height:100%;}
#page{min-height:100%; position:relative;}
#footer{position:absolute; bottom:0; width:100%;}

有没有人知道如何使用 ob_start() 解决这个问题?当然,除了这个之外,所有其他 CSS 规则都可以正常工作......

谢谢的

.JS

ob_start()不是

问题。问题只是一个html/css问题。仅当元素的父元素具有固定高度时,才能使用百分比高度。

在你的例子中,#page父级是body,而body的身高是100%,所以你不能用百分比表示#page。但是您可以尝试例如:

body{height: 1000px;}
#page{min-height:100%; position:relative;}
#footer{position:absolute; bottom:0; width:100%;}

我认为问题出在 css 上;您将body元素的高度设置为其父元素(html元素)的 100%,该元素的高度不一定为 100%。

您应该能够使用以下方法解决问题:

html, body {
  height: 100%;
}