幾乎全屏幕標題問題

我最近嘗試製作一個網站，頂部有一個酒吧，圖像覆蓋了屏幕的其餘部分，非常類似於X-theme demo。我已經設法按比例獲得正確的結果（從thread得到很多幫助）。幾乎全屏幕標題問題

<body> 
<div id="block"> 
     <p>logo</p> 
</div> 
<header> 
    <h1>jumbotron</h1> 
</header> 
<div id="page"> 
    <p>content</p> 
</div>

*{ 
margin: 0; 
} 

#block { 
    height: 10vh; 
    width: 100%; 
    background: red; 
    background-size:cover; 
    } 

body{ 
    width: 100%; 
    height: 100%; 
} 
header { 
     height:90vh; 
     width:100%; 
     background: green; 
     background-size:cover; 
}

該解決方案然而，這不是那麼實用。當你縮小瀏覽器窗口時，頂部的欄（自然）也縮小。因此，添加徽標是不可能的，所以我想知道是否有任何方法可以使條形尺寸保持不變，而標題仍然佔據屏幕的其餘部分？

我真的很感謝一些幫助！ :)

來源

2014-12-27 Mackzoor

~~因爲 vh和 px是兩個不同的單位，這是不可能做一些數學與他們一樣 100vh - 30px，但使用一些jQuery的/ JavaScript的可能。~~ 我給你一個使用jQuery的示例（請務必在頭上添加一個固定的高度）。

在這個答案的最後，這個問題只有一個CSS的解決方案。後來發現了它。

這是html代碼：

<header class="header">YOUR LOGO HERE</header> 
<section class="jumbotron">CONTENT HERE</section> 
<section class="content">SOME OTHER CONTENT HERE</section>

，這應該是JavaScript的一個：

var resizePage = function() { 
    var headerHeight = $('.header').outerHeight() // Getting the height of the header 
    , pageHeight = $(window).height();   // Getting the height of the window 

    $('.jumbotron').css('height', (pageHeight-headerHeight)); 
} 

$(window).on('resize', resizePage()); // Fire every time the page resizes 
resizePage();       // Fire once the site is running

這裏是我告訴你的代碼片段工作一個的jsfiddle：CLICK ME

UPDATE：剛剛發現CSS提供了calc()方法。這是另一個使用此方法的JSfiddle：CLICK ME, TOO。所以有可能使用純CSS，但請注意browser support for this。

.jumbotron { 
    /* Viewport height 100 minus 50px calculated using pure css */ 
    height: calc(100vh - 50px); 
}

來源

2014-12-27 16:16:15

幾乎全屏幕標題問題

回答

相關問題