Home/ Questions/Q 7942931
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T00:07:25+00:00

I have a document like this: <html> <head> <style> div.result { height: 500px; overflow:

  • 0

I have a document like this:

<html>
<head>
<style>
div.result {
height: 500px;
overflow: auto;
width: 900px;
}
</style>
<div class="options"></div>
<div class="result">
<table>
<!--here I have large table-->
</table>
</div>

This gives me a fixed size box with scrollbars.
I would like my result box to take rest of available size in browser and still have scrollbars(if there are necessary)

So that my options div will stay on top and below will be another div having width of 100% and height of remaining browser height.

Is it possible?

This is the result I would like to get:
enter image description here
So when I resize browser scrollbars will be on right and on bottom, something like iframe.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can set absolute sizes and positions to your options and result elements:

    div.options {
    width: 100%;
    height: 300px; // Set height of the options box
    padding: 0;
}

div.result {
    position: absolute;
    top: 300px; // Same as options box
    left: 0;
    right: 0;
    bottom: 0;
    overflow: scroll; // Could be auto too
}

    This should work fine.

    • 0