how to stop my html page resize

Question

hello i made an HTML page with all widths and heights as percentage "that's primary for my design to work with all resolutions" but when i re-size my web browser everything will be damaged. is there a way that when i re-size my web browser i can scroll the page ?

Thanks

Answer 1

You can give elements min-width and min-height properties:

body      { min-width: 900px; }

Now if the browser window has less than 900px of horizontal space, it will show a scroll bar.

Answer 2

You can't stop the end user from resizing their browser.

However, you can build your site into a fixed height / width element, and then centre that element on the page with CSS.

Example

#main-container {
 width: 300px;
 height: 400px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-left: -150px; /* half of the width */
 margin-top: -200px; /* half of the height */
}

I suppose you could force the browser width height with JavaScript, and the onresize event, but this will likely annoy your end users.

Answer 3

The only way to handle this is with script. Take a look at other examples where people float a footer at the bottom of the page for example.

Using jQuery you might do something like:-

<script type="text/javascript">
$(document).ready(function() { setPanels(); });
window.onresize = function() { setPanels(); }

function setPanels() {
    var windowHeight = $(window).height();
    var content1Height = $('#topDiv').height();
    var content2Height = $('#bottomDiv').height();

    // Now calculate the new splits and adjust heights
    ...

</script>