我最近尝试制作一个网站，顶部有一个栏，图像覆盖屏幕的其余部分，就像这样 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;
}
但是这个解决方案不是很实用。当您缩小浏览器窗口时，顶部的栏(自然地)也会缩小。添加 Logo 将是不可能的，所以我想知道是否有任何方法可以使条形大小不变，而标题仍然占据屏幕的其余部分？
非常感谢您的帮助! :)
最佳答案
因为 我会给你一个使用 jQuery 的例子(一定要给标题添加一个固定的高度)。vh 和 px 是两个不同的单位，所以不可能用它们做一些数学运算，比如 100vh - 30px ，但是使用一些 jQuery/JavaScript 是可能的。
在此答案的末尾，有针对此问题的纯 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
更新:刚刚发现 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);
}
关于html - 几乎全屏标题问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27668989/