JQuery，CSS全寬元素不工作

我有一個小問題。我正在使用JQuery將元素設置爲頁面的全寬和高度，並在CSS中使用calc（）函數來將該元素與其他兩個元素一起填充。但是有一個問題，當我嘗試調整大小時，似乎有一條垂直線可能是滾動條的空間，儘管沒有滾動條存在，只是它的空間。它只發生在特定情況下，通常當我調整窗口的大小時。這是我的代碼：http://jsfiddle.net/yr4uz3p5/。JQuery，CSS全寬元素不工作

HTML文件：

<!doctype html> 
<html lang="en-US"> 
    <head> 
     <meta charset="utf-8"/> 
     <title>Test</title> 
     <link rel="stylesheet" type="text/css" href="css/styles.css"/> 
     <link rel="stylesheet" type="text/css" href="css/colors.css"/> 
     <script src="js/jquery.js"></script> 
     <script src="js/script.js"></script> 
    </head> 
    <body> 
     <div> 
      <section> 

      </section> 
      <nav> 

      </nav> 
     </div> 
    </body> 
</html>

CSS文件：

* { 
    margin: 0px; 
    padding: 0px; 
    color: #00ff00; 
    background-color: #000000; 
} 

section { 
    min-width: 300px; 
    width: calc(100% - 300px); 
    height: 100%; 
    background-color: blue; 
    float: left; 
} 

nav { 
    width: 300px; 
    height: 100%; 
    background: red; 
    float: left; 
} 

div { 
    min-width: 300px; 
} 

body { 
    min-width: 300px; 
}

JS文件：

$(document).ready(function() { 
    $("div").width($(window).width()); 
    $("div").height($(window).height()); 
}); 

$(window).resize(function() { 
    $("div").width($(window).width()); 
    $("div").height($(window).height()); 
});

這個總的想法是，我想導航到位於右側一邊固定寬度爲300px，我希望數據顯示在左邊。

在此先感謝您的幫助！

編輯：

我已經找到了更好的辦法，因爲這些元素將始終具有高度相同的窗口，我已經把溢出：隱藏的身體和現在的黑線將永遠不會出現...

來源

2015-05-01 Picvajz Komandant

此外，我已經嘗試做同樣的事情，但針對寬度和高度（使他們的高度等於$（窗口）.height（）和寬度爲$（窗口）寬度和高度單個元素（部分和導航）。寬度（） - 300的部分）和刪除div元素，發生了同樣的事情。 –

calc是實驗性的，並且在所有瀏覽器中都不完全支持，特別是當子元素具有相同的屬性並且許多webkit屬性需要-webkit-供應商前綴時，IE會出現問題。看看是否添加供應商前綴可以解決您的問題。（另請注意，其列爲MDN文檔中的越野車） https://developer.mozilla.org/en-US/docs/Web/CSS/calc http://caniuse.com/#search=calc – Philippe

我有嘗試設置寬度和高度沒有鈣（），與JQuery ...併發生同樣的... –

嘗試另外設置divmin-width到calc(100%)

div { 
    min-width:calc(100%); 
}

的jsfiddle http://jsfiddle.net/yr4uz3p5/1/

來源

2015-05-01 23:37:18 guest271314

真棒，這解決了這個問題，但我仍然想知道爲什麼發生這種情況...如果你能啓發我，這將是偉大的... :) –

在http://jsfiddle.net/yr4uz3p5/1/加載「jQuery」之前加載'css';包含元素的'calc（）'http://dev.w3.org/csswg/css-values-3/#calc-notation set'min-width：calc（100％）'，繼續計算表達式提供'100％ '，獨立於'.resize（）'事件; 'nav'元素上設置的'float：left'不_觸及其包含框或其他浮動元素的邊緣。兄弟'部分'集'浮動：左'？見https://developer.mozilla.org/en-US/docs/Web/CSS/float在http://jsfiddle.net/yr4uz3p5/1/'min-width：300px'不計算'min-width'之間'resize'，包裝浮動元素？ – guest271314

JQuery，CSS全寬元素不工作

回答

相關問題