每次頁面展開時自動調整div的寬度到頁面的寬度

我想讓我的div #title在我的頁面的整個頂部水平拉伸。這使用我的CSS工作正常。但是，我允許用戶使用jQuery將元素添加到我的頁面，當發生這種情況時，頁面會水平擴展，用戶可以向左和向右滾動。不幸的是，當頁面展開並保持原始頁面的寬度時，我的#title div不會展開。每當頁面寬度發生變化時，是否有辦法讓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; 
}

來源

2013-11-23 natsuki_1996

添加'jsfiddle.net' samle標記和jquery – AuthorProxy

@Morre，謝謝，但擺脫這並沒有幫助。有什麼想法嗎？ –

小提琴在哪裏？ –

試試這個，

<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>

我希望這將有助於。

來源

2013-11-23 11:39:03 james

謝謝！但我似乎無法得到$（window）.resize（function（）{...）的工作，即使我只是在它內部設置一個簡單的警報。似乎沒有認識到該頁面正在調整大小。 .. –

你必須在你的html中包含jquery庫 –

@JoeDanger由於Vicky說你必須在你的腳本之前包含jquery庫，我更新了答案。 – james

每次頁面展開時自動調整div的寬度到頁面的寬度

回答

相關問題