我是 html 的新手(2 周前，我完成的编码最多的是 python 研讨会，我作为新生失败了，但我的老板认为“机械工程师”意味着我应该知道如何建立一个网站scratch too)，所以如果我不能正确解释或命名事物，请原谅我。我已经按照“创意” Bootstrap 模板开发了一个网站 https://blackrockdigital.github.io/startbootstrap-creative/因为起初我的老板喜欢全屏照片选项，但在以这种方式创建整个网站后，她认为这不鼓励用户滚动到照片下方的部分(她不喜欢使用箭头建议的想法下面有更多信息)。她决定只希望登录页面是全屏照片，其余页面她希望背景照片填满整个屏幕宽度，但只有大约 70% 的视口(viewport)让视口(viewport)底部开始显示下一节的内容。我已经研究了几个小时，并尝试了我能遇到的一切来做到这一点，但我似乎无法做到。我最成功的尝试是在照片上添加边框底部，但那是纯色(没有显示任何内容)，我无法弄清楚如何让内容从边框开始。一个页面的代码是这样的:
<html>
<head>...</head>
<body>
<nav>...</nav> <!--I've used a Bootstrap navbar-->
<header class="about"> <!--for the about page-->
<div class="header-content">
<div class="header-content-inner">
<h1 id="homeHeading">About</h1>
<hr>
<p>...</p>
</div>
</div>
</header>
<!-- The above is the part we want to only fill about 70-80% of the viewport below the navbar-->
<section id="services" >...</section> <!--I want this part to start on the bottom 20-30% of the page-->
</body>
</html>
使用 CSS:
header.about {
background-image: url("/about.jpg");
background-size: cover;
background-repeat: no-repeat;
}
我试过更改 background-size: 100% 80% 或去掉“background-size”行并添加 height: 80% width: 100% 但这只在照片底部添加了空白但没有'实际上将服务部分的内容向上移动。我尝试通过编码 height: calc(80vh) 调整 header.about 的 css 中标题元素的高度，有和没有 background-size 行，它根本不会改变高度。我已经尝试为标题预先指定一个高度，就像 height: 100px 一样疯狂，只是为了看看它是否有效，但仍然没有任何变化并且它填满了整个屏幕。我想保持对更改浏览器大小和移动浏览器的响应能力，所以我想避免为像素高度指定数字，即使我能弄清楚如何使它们工作。 任何人都可以解释一下如何更改标题部分的高度以仅填充视口(viewport)的 70-80% 或就为什么我似乎无法更改该部分的高度提出建议吗？
最佳答案
只需添加此 CSS 规则:
header {
min-height: 50% !important;
}
关于html - 如何更改 html/css 中 <header> 部分的高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45198703/