Question

我是html的新手（在2周之前，我做过的编码最多的是我作为新人失败的python研讨会，但我的老板假设＆＃34;机械工程师＆＃34;意味着我应该知道如何从头开始建立一个网站，所以如果我没有正确解释或命名，请原谅我。我已经开发了一个类似于＆＃34; Creative＆＃34;的网站。引导模板https://blackrockdigital.github.io/startbootstrap-creative/因为起初我的老板喜欢全屏照片选项，但在以这种方式创建整个网站后，她并不认为它鼓励用户滚动到照片下方的部分（她不喜欢用箭头表示下面有更多信息）。她决定只希望着陆页成为全屏照片，而其他页面她希望背景照片填满整个屏幕宽度，但只有大约70％的视口会让视口底部开始显示下一节的内容。我已经研究了几个小时，并尝试了我可以遇到的所有事情，但我似乎无法管理它。我最成功的尝试是为照片添加边框底部，但这是纯色（没有显示任何内容），我无法弄清楚如何让内容从边框开始。页面的代码如下：

<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;
}

我尝试过改变背景尺寸：100％80％或摆脱＆＃34;背景尺寸＆＃34;行和添加高度：80％宽度：100％，但只在照片底部添加了空格，但实际上没有从服务部分向上移动内容。我尝试通过使用和不使用背景大小的行编码高度：calc（80vh）来调整header.about的css中标题元素的高度，并且它根本不会改变高度。我已经尝试预先指定标题的高度作为疯狂的高度：100px只是为了看它是否正常工作，但仍然没有任何变化，它填满了整个屏幕。我希望保持对更改浏览器大小和移动浏览器的响应能力，因此我希望避免为像素高度指定数字，即使我可以弄清楚如何使它们工作。任何人都可以解释我如何更改我的标题部分的高度，只填充视口的70-80％或提出建议，为什么我似乎无法改变该部分的高度？

Answer 1

只需添加此CSS规则：

header {
    min-height: 50% !important;
}

如何更改html / css中<header>部分的高度？

1 个答案: