jQuery，CSS全寬元素不起作用

Question

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

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的右側，而我希望數據顯示在左側。

在此先感謝您的幫助！

編輯：

我發現了更好的方法，因為這些元素將始終具有與窗口相同的高度，所以我放置了溢出：為身體隱藏，現在黑線將永遠不會出現...

Answer 1

嘗試另外將div min-width設置為calc(100%)

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

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

jQuery，CSS全寬元素不起作用

問題描述

1 個解決方案

解決方案1
0 已采納 2015-05-01 23:37:18

jQuery，CSS全寬元素不起作用

問題描述

1 個解決方案

解決方案1 0 已采納 2015-05-01 23:37:18

解決方案1
0 已采納 2015-05-01 23:37:18