Question

我希望我的div #title在我的整个页面顶部水平拉伸。使用下面的CSS这很好用。但是，我允许用户使用jQuery向我的页面添加元素，当发生这种情况时，页面会水平扩展，用户可以向左和向右滚动。不幸的是，当页面展开并保持原始页面的宽度时，我的#title div不会展开。有没有办法让div在每次页面宽度改变时自动扩展到页面的宽度？

HTML：

<html>
    <head>
        ...
    </head>
    <body>

        <div id="title">
            <p class="title_banner_words" id="title_words">My Title</p>
        </div>

    </body>
</html>

CSS：

html {
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0;
}    

body {
    width: 100%; 
    height: 100%; 
    position: relative; 
    padding: 0; 
    margin: 0;
}

#title {
    background-color: #35373b;
    width:100%;
    height:100px;
    position: absolute;
}

Answer 1

试试这个，

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" >
    function methodToFixLayout() {
        winWidth = $(window).width();
        console.log(" " + winWidth);
        $('#title').css('width', winWidth / divide with a number which suits); //Ex: winWidth / 12.49
       $('p').css('float','left');
       }

    $(document).ready(function(){
      methodToFixLayout();
    });

    $(window).resize(function(){
            methodToFixLayout();
        });
</scipt>

我希望这会有所帮助。

每次页面展开时自动调整div到页面宽度

1 个答案: