Foros del Web - Ver Mensaje Individual - Diseño flexible :: Porcentajes diferentes a div principal

cristian_cena · #2 (**permalink**) 18/08/2011, 09:07

Para esto ya deberías usar javascript. Si usas jquery debes usar rezise();

Te comparto un ejemplo. Luego lo adaptas a tu necesidad:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento sin título</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var windowWidth = $(window).width(); //retrieve current window width
            var windowHeight = $(window).height(); //retrieve current window height
            var documentWidth = $(document).width(); //retrieve current document width
            var documentHeight = $(document).height(); //retrieve current document height
            var vScrollPosition = $(document).scrollTop(); //retrieve the document scroll ToP position
            var hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position
            
            $('#window').html("<b>ancho inicial</b>: "+windowWidth+"px, <b>alto inicial</b>: "+windowHeight+"px");
            
            $(window).resize(function() {
            $('#wx').val($(window).width()+"px");
            $('#wy').val($(window).height()+"px");
            });
        });
    </script>
</head>
<body>
    <div id="window"></div>
    <b>ancho actual</b>:
    <input type="text" id="wx"/>
    <b>alto actual</b>:
    <input type="text" id="wy"/>
</body>
</html>

Saludos.