How can I get the height to stretch depending on the content?

Started by manvbf, 11-01-2011, 04:01:33

Previous topic - Next topic

manvbfTopic starter

I've started using php includes in my webpages, and some of the files I'm including are longer than the given space of the area where it's being included. So how can I get the page to stretch with the content?
  •  


zrfragap

To make the page stretch with the content, you can set the height of the included file area to auto. This way, it will automatically adjust its height based on the content size. Here's an example:

```html
<style>
  .included-file {
    height: auto;
    width: 100%;
  }
</style>

<div class="included-file">
  <?php include 'your_included_file.php'; ?>
</div>
```

This will make the `.included-file` div adjust its height dynamically based on the content of `your_included_file.php`.

In addition to setting the height of the included file area to auto, you can also make the entire page stretch with the content using a few additional CSS adjustments.

First, make sure the body and html elements have a height of 100% to allow the page to expand based on the content:

```html
<style>
  html, body {
    height: 100%;
  }
</style>
```

Next, you can set the height of the container that holds the included file area to 100% as well:

```html
<style>
  .container {
    height: 100%;
  }
</style>

<div class="container">
  <div class="included-file">
    <?php include 'your_included_file.php'; ?>
  </div>
</div>
```

Finally, make sure to adjust the height of the parent elements up the hierarchy if needed, to enable the page to stretch as desired.

By implementing these CSS adjustments, your page should now dynamically stretch with the content of the included file.
  •