CODEWITHSUNDEEP
htmlcss
Ingreatway
Ingreatway

Reputation: 145

how to make div scrollable with 100% height and width?

i have included one table 100% and 100%.

<table border="1" cellpadding="0" cellspacing="0" width="100%" height="100%"> 
    <tr height="100">
         <td>
            this is fixed height 100px
         </td>
    </tr>
    <tr>
         <td>
              <div style="height: 100%;width: 100%">
            remaining height for this td. and this div should be do only vertical scrolling without expanding the page size.
              </div>
         </td>
    </tr>
</table>

first tr height is fixed height 100px

remaining height for this second tr. and this tr contains a div with 100% height and width, this div should be do only vertical scrolling without expanding the page size.

Upvotes: 0

Views: 210

Answers (5)

user1823761
user1823761

Reputation:

Working jsFiddle Demo

There is no need to use table. Use div instead:

<div id="head">this is fixed height 100px</div>

<div id="body">
    Content
</div>

And CSS:

#head {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: yellow;
}

#body {
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
    background: pink;
    overflow: auto;
}

Full Page Markup:

<!doctype html>
<html>
    <head>
        <title>My Page</title>
        <style>
            #head {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 100px;
                background: yellow;
            }

            #body {
                position: absolute;
                top: 100px;
                left: 0;
                right: 0;
                bottom: 0;
                background: pink;
                overflow: auto;
            }
        </style>
    </head>
    <body>

        <div id="head">this is fixed height 100px</div>
        <div id="body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
        </div>

    </body>
</html>

Upvotes: 1

Dummy Code
Dummy Code

Reputation: 1898

With your demo link I was able to successfully see what your issue is.

You do not have the following code in your second <div>'s style="" tag.

white-space: nowrap; overflow-x: hidden;

If you add it you should be up and running.

Upvotes: 1

Shankar Akunuri
Shankar Akunuri

Reputation: 187

try like this <div style="height: 100%;width: 100%;overflow-y: scroll;">

Upvotes: 0

Padmanathan J
Padmanathan J

Reputation: 4620

Try this style="height:100%; overflow-y:scroll"

Upvotes: 0

Emin Hasanov
Emin Hasanov

Reputation: 1362

Trye style="height:auto; overflow-y:scroll"

Upvotes: 0

Related Questions