JQUERY: Resize div to window width

前端 未结 4 727
有刺的猬
有刺的猬 2021-02-09 20:56

I am trying to force the width of a div to the width of a browser window. So that even if the window is resize the adjusts it\'s width.

I have been researching for about

相关标签:
4条回答
  • 2021-02-09 21:08
    width: 100%;
    display: block;
    

    Optional:

    position: absolute;
    
    0 讨论(0)
  • 2021-02-09 21:13

    I think you can solve this using css width 100%

     div#full{ width:100%}
    

    :)

    0 讨论(0)
  • 2021-02-09 21:17

    Without a container limiting the width, a div should span the width of the browser window by default. You can explicitly set the width to 100%, but that shouldn't be necessary:

    <div style="width:100%;">Hello world</div>
    

    I think CSS is more appropriate here, but you can do this in jQuery like this:

    $("#div1").width($(window).width());
    

    To run the above code whenever the window is resized, you can do this:

    $(window).resize(function(){
        $("#div1").width($(window).width());
    });
    

    Here's a jsFiddle. For the sake of demonstration, the div expands on button click.

    0 讨论(0)
  • 2021-02-09 21:27

    Try this:

    <div id="full"></div>
    
    <script type="text/javascript">
        function reSize($target){
            $target.css('width', $(window).width()+'px');
        }
        $(document).ready(function(){
            $(window).bind('resize', reSize($('#full')));
            $(window).trigger('resize');
        });
    </script>
    

    I hope this helps!

    0 讨论(0)
提交回复
热议问题