几乎全屏幕标题问题

我最近尝试制作一个网站，顶部有一个酒吧，图像覆盖了屏幕的其余部分，非常类似于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

几乎全屏幕标题问题

回答

相关问题