調整大小后如何為導航提供100％的像素寬度？

Question

因此，基本上，我嘗試使用jQuery為導航欄（Bootstrap導航欄）提供100％的寬度，但以像素為單位。

當然，必須在每次調整瀏覽器/窗口大小時確定此值。

我想出了這個，盡管它有很多問題。 它使用'nav'的起始寬度作為'navsize'，並且在調整窗口大小時， navsize仍然保持不變。

$(document).on('ready', function () {
    $(window).on('resize', function () {
        var navsize = $('nav').width();
        $('nav').css('width', navsize);
    }).trigger('resize');
});

我也嘗試過var navsize = $('nav').innerWidth(); 這也不是一件好事。

因為我已經用console.log()測試過，所以一定要在調整大小后調用該函數。

對於所有想知道為什么要這樣做的人，我正在使用StickyJS使導航與頁面一起滾動。 雖然由於使用100%寬度，但由於nav離開了容器，滾動時它變得更小。

Answer 1

這應該工作

    $(document).on('ready', function () {
    $(window).on('resize', function () {
        $('nav').css('width', 'calc(100% + 1px  - 1px)' );
        console.log( $('nav').width() );

        ///  Use following ONLY if you specifically want to set the width in pixel
        $('nav').width($('nav').width());
    }).trigger('resize');
});

console.log將具有您的寬度（以像素為單位）。 表示以后每當您讀取寬度時，它將以像素為單位。

calc(100% + 1px - 1px)轉換寬度並以px單位進行設置，我們稍后可以閱讀。

Answer 2

您確定$（'nav'）存在嗎？

我已經使用基本的引導程序頁面進行了一些測試，並對您的代碼進行了少許更改。

導航到此頁面並打開控制台檢查器。

http://getbootstrap.com/examples/starter-template/

粘貼以下代碼，您將看到.navbar寬度將記錄在窗口調整大小上。

$(window).on('resize', function () {
    var navsize = $('.navbar').width();
    console.log(navsize)
});

干杯。

Answer 3

支持HTML和CSS會更容易，但是我僅憑行為就可以猜測一下。

最佳猜測聽起來可能是其中一種選擇。

1. 您打算使用＃nav，.nav，div.nav等，而實際上並不是要選擇“ nav”元素
2. 您的“ nav”元素未顯示inline-block | block，這在某些瀏覽器中會發生
3. 您正在不支持它的瀏覽器中使用“ nav”標簽（IE 8）
4. 您的JS庫不支持“ nav”標簽

另一種方法是使用JS將您的導航重新定位到正文中（在適當的滾動深度處），並將html，body和nav標簽的寬度設置為100％

希望能有所幫助。