Question

我最近尝试制作一个顶部有条形图的网站，其图像覆盖了屏幕的其余部分，就像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;
}

然而，这个解决方案并不那么实用。缩小浏览器窗口时，顶部的栏（自然）也会缩小。添加徽标是不可能的，所以我想知道是否有任何方法可以使条形大小保持不变，而标题仍占据屏幕的其余部分？

我真的很感激一些帮助！：）

Answer 1

~~因为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 one：

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

更新：刚刚发现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);
}

几乎全屏标题问题

1 个答案: