Auto resize div when resizing browser

In my page, I have a form inside a div. When I resize the browse开发者_JS百科r, some parts of the form won't be seen and scroll bars will appear. How can I do it in css wherein after resizing, the whole form will still be visible without having to use scroll bars?

Use "%", not "px", "pt", "em" or whatever constant size, when creating such properties, like width.

For example, #element: width:80%; will make the "element" be 80% in width of it's parent element. And if the parent element is body, it will automaticly change it's width together with the browser window width.

If some child of "element" will have constant width, the minimum width of an "element" will be the same size as this child.

I hope my answer was helpfull.

Have you tried setting the forms element heihgt and width properties equals to 100% into 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 positioning property it can be: static, relative, fixed or absolute.