Adjustable Div Container for Text (Zoom in and Zoom out)

Question

I want to know how to make an adjustable div container which adjusts its own width and height according screen its being displayed in laptop, netbook or desktop. It must be so that no text under or overflows its container and no white spaces are left within the container.

I tried using % or em but since its based on base font-size 16px there are occasion in smaller netbook screen where the text overflows or in bigger screen desktop where there are whitespaces left in the bottom of container.

Any suggestions would be greatly appreciated.

<style type="text/css">
    .tt
    {
        border: 2px solid red;
        height: 80px;
        width: 168px;
        font-size: 16px;
        padding: 0px;
    }

</style>
</head>

<body>
    <div class="tt">
        Hello World Hello World<br>
        Hello World Hello World<br>
        Hello World Hello World<br>
        Hello World Hello World<br>
    </div>
</body>

Not sure what you're asking - do you want a div that is always 100% width and height of the browser window? — Gabriel Florit, Oct 13 '12 at 04:57

score 0 · Accepted Answer · edited May 23 '17 at 12:12

You can try this to make the div stretch to the screen:

html, body, .tt { width:100%; height:100%; padding: 0; margin: 0;}

.tt
{
    border:2px solid red;
    font-size:16px;

    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
}

Beware, box-sizing is a CSS3 property. If you don't want to use it, you can remove the border from the div, or use tables (deprecated).

Do you also need to fill the hole screen with text? In that case, this will be usefull: CSS: Set font to a size so the text would occupy whole container

(the link is a duplicated question, but in my opinion has a more easy to understand answer).

Adjustable Div Container for Text (Zoom in and Zoom out)

1 Answers1