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

Question

I'm actually working on a PHP project using MVC structure, including DOCTYPE & HEAD tag via a single file during an output buffering using ob°start().

The problem comes when i wanna declare a min-height property for may page container, in order to stick the footer at the bottem of the page. ob_start() -- ob_get_clean() use seems to forbid browsers to access these properties in time so they can't evaluate height value.

This is my index.php file:

<?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');

the header.php file contains the doctype, and the first basics of 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'>

the footer:

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

And a basic css exemple:

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

Does any one know how to fix this using ob_start() ? Of course, every other CSS rules work fine except this ...

Thank's

JS

It seems very unlikely that server-side code affects the rendering of the sent html / css. Can you confirm that it works if you remove the output buffering? — jeroen, Jan 23 '13 at 14:20

score 0 · Answer 1 · answered Jan 23 '13 at 14:19

The ob_start() is not the problem. The problem is only a html/css problem. You can only use a height in percentage if the parent of the element has a fixed height.

In your case, #page parent is body and the body's height is 100%, so you can't use a height in percentage for #page. But you can try this for example :

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

score 0 · Answer 2 · answered Jan 23 '13 at 14:24

0

I think the problem is with the css; you are setting the body element's height to 100% of its parent, the html element, which does not necessarily have a height of 100%.

You should be able to solve your problem using:

html, body {
  height: 100%;
}

answered Jan 23 '13 at 14:24

jeroen

91,079
21
114
132

1

@user1758625 You're welcome. Please don't forget to accept the answer if it works for you (the check-mark below the vote count). – jeroen Jan 23 '13 at 16:46

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

2 Answers2