高度（）問題，Chrome瀏覽器縮放使viewheight值有一個小數（令人討厭的滾動條）

Question

因爲我使用水平網站，它需要我使用.height（）腳本來告訴瀏覽器的視圖高度，因此內容高度中。 在125％縮放比例下使用Chrome會產生一個奇怪的結果，使我對HTML 773.6 px高度感到高興。 JSFiddle .value example。

$（window）.height（）;

結果是：774 PX，這增加了的像素的HTML，製造惱人的垂直滾動條appair。

Math.floor($(window).height()); 

的.height（）腳本總是舍入值的數字，沒有小數，所以我不能使用Math.floor（）。

我不想使用overflow-y：hidden;

JSFiddle horizontal template。

Answer 1

對我來說，它看起來像標題欄有一個固定的高度！？那麼使用經典方法沒有問題。如果標題高度靈活，我會使用flexbox。但這取決於您想要覆蓋哪些瀏覽器。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.wrap { 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    -webkit-flex-wrap: nowrap; 
 
    -ms-flex-wrap: nowrap; 
 
    flex-wrap: nowrap; 
 
    -webkit-justify-content: flex-start; 
 
    -ms-flex-pack: start; 
 
    justify-content: flex-start; 
 
    -webkit-align-content: stretch; 
 
    -ms-flex-line-pack: stretch; 
 
    align-content: stretch; 
 
    -webkit-align-items: stretch; 
 
    -ms-flex-align: stretch; 
 
    align-items: stretch; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    } 
 

 
header { 
 
    background: red; 
 
    -webkit-order: 0; 
 
    -ms-flex-order: 0; 
 
    order: 0; 
 
    -webkit-flex: 0 0 auto; 
 
    -ms-flex: 0 0 auto; 
 
    flex: 0 0 auto; 
 
    -webkit-align-self: auto; 
 
    -ms-flex-item-align: auto; 
 
    align-self: auto; 
 
    } 
 

 
main { 
 
    background: blue; 
 
    -webkit-order: 0; 
 
    -ms-flex-order: 0; 
 
    order: 0; 
 
    -webkit-flex: 1 0 auto; 
 
    -ms-flex: 1 0 auto; 
 
    flex: 1 0 auto; 
 
    -webkit-align-self: auto; 
 
    -ms-flex-item-align: auto; 
 
    align-self: auto; 
 
    }

<div class="wrap"> 
 
    <header>Test</header> 
 
    <main>Content</main> 
 
</div>