設置div以覆蓋所有窗口大小，減去菜單欄高度，不使用滾動條

我試圖從頭開始構建滑塊插件，因爲我需要它具有某些在其他插件中很難找到的特定行爲。無論如何，其中一個要求是它佔用了頁面中的所有可用空間，減去菜單欄高度。設置div以覆蓋所有窗口大小，減去菜單欄高度，不使用滾動條

這是我設置了一個例子：https://jsfiddle.net/5ujqw94n/

設置大小的尺寸我調用這個函數：

adjustSizes: function(that) { 
    var w = document.body.parentNode.clientWidth; 
    var h = $(window).height() - $('header').height(); 
    console.log('window inner w', $(window).innerWidth()); 
    that.$elem.width(w); 
    that.$elem.height(h); 
    console.log('window inner w', $(window).innerWidth()); 
    console.log('document client w', document.body.parentNode.clientWidth); 
}

我調整窗口大小時也調用該函數。會發生什麼事情是，當頁面加載時，它顯示滾動條，但調整窗口大小使它們消失。

在函數中，我放了一些console.log來跟蹤窗口寬度，並注意到應用調整大小後有15px的差異。我認爲這可能與滾動條有關，並且搜索arouns似乎是這種情況。

我不知道如何解決它。把overflow: hidden作品，但我希望另一種方法，因爲這感覺像一個解決方法。

例如，在這個其他page一切似乎工作，因爲我想和沒有overflow: hidden在身體。

什麼建議嗎？

來源

2016-03-15 Carlo

我發現了一種解決方案，（至少）在鉻中工作。從.page-container

刪除邊框和修改.slider-container

.slider-container { 
    border: 0px solid yellow; 
    left: 0; 
    right: 0; 
    height: 100%; 
    max-width: 960px; 
    margin: auto; 
    overflow: hidden; 
    position: absolute; 
}

現在倒在它上面的一些body { margin: 0; }和服務刷新。

但是什麼令我感到困惑就是爲什麼邊框導致水平滾動條即使box-sizing: border-box;說 ...希望它有助於反正。

來源

2016-03-15 11:55:52 Arsylum

謝謝，這真的很有幫助。我真的不需要邊框，並正在使用它們進行調試。我和你一樣困惑，但可能有一個很好的理由，爲什麼它的行爲如此。順便說一下，我還發現我可以從'slider-container'中移除'position：absolute'，並使用'margin：auto'。我更新了小提琴：https：//jsfiddle.net/5ujqw94n/1/（希望我不會錯過任何其他方式） – Carlo

是的工作，因爲div是隱式設置爲寬度100％，其上限爲960px和因此在更寬的屏幕上以邊距自動爲中心。我會將寬度：100％添加到滑塊中的圖像，儘管;-) – Arsylum

設置div以覆蓋所有窗口大小，減去菜單欄高度，不使用滾動條

回答

相關問題