有沒有辦法將子div的寬度設置為瀏覽器的100％？

Question

有沒有一種方法來設定width一的child div至100%的瀏覽器中，而不是100％的parent div ？
Position: fixed是我發現的唯一方法，但這是導航的一部分，因此無法使用。 基本上，這是一個dropdown菜單， sub-nav需要跨越瀏覽器寬度的100％。
最好只用CSS。 我正在處理DNN nav並且無法修改腳本本身。
該腳本在jQuery中，因此，如果有一種方法可以在文檔上對其進行修改，那么我可以做到這一點。

這是菜單結構

 <div id="dnnStandardMenu"> <ul class="dnnNav"> <li data-page-id="676387" class="root mi mi0 sel first" style="width: 126px;"><a href="/Default.aspx?tabid=676387" target="" class="txt">Home</a></li> <li data-page-id="914191" class="root mi mi0" style="width: 144px;"><a href="/Default.aspx?tabid=914191" target="" class="txt">Culture</a></li> <li data-page-id="914192" class="root mi mi0" style="width: 145px;"><a href="/Default.aspx?tabid=914192" target="" class="txt">Contact</a></li> <li data-page-id="914193" class="root mi mi0" style="width: 132px;"><a href="/Default.aspx?tabid=914193" target="" class="txt">Coach</a></li> <li data-page-id="914194" class="root mi mi0 haschild" style="width: 138px;"><a href="/Default.aspx?tabid=914194" target="" class="txt">REFEREE</a><ul class="m m0"> <li class="col"><ul class="col1"><li data-page-id="914196" class="mi mi1 first"><a href="/Default.aspx?tabid=914196" target="" class="txt"><span class="icn no-icn"></span>Online Training</a></li><li data-page-id="914198" class="mi mi1 last"><a href="/Default.aspx?tabid=914198" target="" class="txt"><span class="icn no-icn"></span>Referee Supplies</a></li></ul></li><li class="col"><ul class="col2"><li data-page-id="914197" class="mi mi1"><a href="/Default.aspx?tabid=914197" target="" class="txt"><span class="icn no-icn"></span>SAY vs. USSF Rule Differences</a></li></ul></li><li class="col"><ul class="col3"><li data-page-id="914199" class="mi mi1"><a href="/Default.aspx?tabid=914199" target="" class="txt"><span class="icn no-icn"></span>Qualifications</a></li></ul></li></ul> </li> <li data-page-id="914205" class="root mi mi0" style="width: 138px;"><a href="/Default.aspx?tabid=914205" target="" class="txt">sadmin</a></li> <li data-page-id="7" class="root mi mi0 haschild last" style="width: 123px;"><span class="txt">Host</span><ul class="m m0" style="visibility: visible; left: -55px; width: 752px; right: auto; display: none;"> <li class="col" style="height: 260px;"><ul class="col1"><li data-page-id="187309" class="mi mi1 first"><a href="/Default.aspx?tabid=187309&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>Health Monitor</a></li><li data-page-id="252866" class="mi mi1"><a href="/Default.aspx?tabid=252866&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>Host Alerts</a></li><li data-page-id="116842" class="mi mi1"><a href="/Default.aspx?tabid=116842&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>Payment Sync</a></li><li data-page-id="85608" class="mi mi1"><a href="/Default.aspx?tabid=85608&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>Report Wizard 2.0</a></li><li data-page-id="19" class="mi mi1"><a href="/Default.aspx?tabid=19&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>File Manager</a></li><li data-page-id="83444" class="mi mi1"><a href="/Default.aspx?tabid=83444&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>Lists</a></li><li data-page-id="112125" class="mi mi1"><a href="/Default.aspx?tabid=112125&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>Extensions</a></li><li data-page-id="545857" class="mi mi1 last"><a href="/Default.aspx?tabid=545857&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>HTML Editor Manager</a></li></ul></li><li class="col" style="height: 260px;"><ul class="col2"><li data-page-id="16" class="mi mi1"><a href="/Default.aspx?tabid=16&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>Host Settings</a></li><li data-page-id="181364" class="mi mi1"><a href="/Default.aspx?tabid=181364&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>Bulk Email</a></li><li data-page-id="92782" class="mi mi1"><a href="/Default.aspx?tabid=92782&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>Daily Payment Summary</a></li><li data-page-id="129517" class="mi mi1"><span class="txt"><span class="icn no-icn"></span>Store</span><ul class="m m1"> <li data-page-id="129518" class="mi mi2 first"><a href="/Default.aspx?tabid=129518&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>Royalty Invoices</a></li> <li data-page-id="129519" class="mi mi2"><a href="/Default.aspx?tabid=129519&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>Royalty Report - Current Period</a></li> <li data-page-id="149762" class="mi mi2"><a href="/Default.aspx?tabid=149762&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>Product Sales Report</a></li> <li data-page-id="152479" class="mi mi2"><a href="/Default.aspx?tabid=152479&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>Product Sales Origin Report</a></li> <li data-page-id="157549" class="mi mi2"><a href="/Default.aspx?tabid=157549&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>Portal Products</a></li> <li data-page-id="157550" class="mi mi2 last"><a href="/Default.aspx?tabid=157550&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>Product Attribute Editor</a></li> </ul> </li><li data-page-id="21" class="mi mi1"><a href="/Default.aspx?tabid=21&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>SQL</a></li><li data-page-id="83445" class="mi mi1"><a href="/Default.aspx?tabid=83445&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>Superuser Accounts</a></li><li data-page-id="113401" class="mi mi1"><a href="/Default.aspx?tabid=113401&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>Skins</a></li></ul></li><li class="col last" style="height: 260px;"><ul class="col3"><li data-page-id="308159" class="mi mi1"><a href="/Default.aspx?tabid=308159&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>Order Summary</a></li><li data-page-id="17" class="mi mi1"><a href="/Default.aspx?tabid=17&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>Site Management</a></li><li data-page-id="93184" class="mi mi1"><a href="/Default.aspx?tabid=93184&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>Invoice Summary</a></li><li data-page-id="157553" class="mi mi1"><a href="/Default.aspx?tabid=157553&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>AT</a><ul class="m m1"> <li data-page-id="157557" class="mi mi2 first"><a href="/Default.aspx?tabid=157557&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>Template Manager</a></li> <li data-page-id="157558" class="mi mi2 last"><a href="/Default.aspx?tabid=157558&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>Email Template Manager</a></li> </ul> </li><li data-page-id="3810" class="mi mi1"><a href="/Default.aspx?tabid=3810&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>Schedule</a></li><li data-page-id="112124" class="mi mi1"><a href="/Default.aspx?tabid=112124&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>Dashboard</a></li><li data-page-id="545856" class="mi mi1"><a href="/Default.aspx?tabid=545856&amp;portalid=9048" target="" class="txt"><span class="icn no-icn"></span>Configuration Manager</a></li></ul></li></ul> </li> </ul> </div> 

Answer 1

是。 只需設置width: 100vw ，其中vw是視口寬度的1/100。 如果被覆蓋，只需在其旁邊使用!important即可。

Answer 2

這可能不是最優雅的解決方案，但這是我一直在尋找的更好的解決方案。

我將位置設置為固定，並添加了此jQuery

 <script> $(document).scroll(function(){ if($(this).scrollTop() > 50){ $('.say-child #dnnStandardMenu .root .m0').css({"display" : "none", "top" : "auto"}); } if($(this).scrollTop() > 75){ $('.say-child #dnnStandardMenu .root .m0').css({"top" : "148px"}); } if($(this).scrollTop() > 100){ $('.say-child #dnnStandardMenu .root .m0').css({"top" : "48px"}); } }); </script>