Automatically resize div when resizing browser

Question

On my page, I have a form inside a div. When I resize the browser, some parts of the form will not be visible and scroll bars will appear. How to do this in css, where after resizing the whole form will be visible without using scroll bars?

Answer 1

When creating properties such as width, use "%" rather than "px", "pt", "em" or some constant size.

For example, it #element: width:80%;will make an “element” equal to 80% of the width of its parent element. And if the parent element is the body, it will automatically change its width along with the width of the browser window.

If any child element of the "element" has a constant width, the minimum width of the "element" will be the same size as this child.

Hope my answer was helpful.

Answer 2

Have you tried to set the heihgt and width element properties to be 100% in your CSS file?

<div style="background:gray;width:100%;height:100%">
   <form id="id_form" style="background:orange;width:100%;height:100%">
        <input id="id_send_button" type="button" value="click me..." />        
        <!-- more controls -->
   </form>
</div>

Also consider the property of positioning, which it can be: static, relative, fixed or absolute.