Home/ Questions/Q 8674183
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T19:38:44+00:00

I want to know how to make an adjustable div container which adjusts its

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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).

    • 0