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

我是新来的html（之前2个星期前我做的最多的编码是python研讨会，我作为一个新生失败了，但我的老板认为“机械工程师”意味着我应该知道如何从头开始建立一个网站所以请原谅我，如果我没有正确解释或命名的事情。我开发了一个网站，沿着“创意”引导模板https://blackrockdigital.github.io/startbootstrap-creative/，因为起初我的老板喜欢全屏照片选项，但是通过这种方式创建整个网站后，她并不认为这是鼓励用户滚动到照片下方的部分（她不喜欢使用箭头表示下面有更多信息）。她决定她只希望登录页面成为全屏幕照片，而其他页面则希望背景照片填充整个屏幕宽度，但只有视口的70％左右才能使视口底部开始显示下一节的内容。我一直在研究几个小时，并尝试所有我可以遇到的事情来做到这一点，但我似乎无法管理它。我最成功的尝试是为照片添加边框底部，但这是纯色（没有显示任何内容），我无法弄清楚如何让内容开始在边框上。一个页面的代码是这样的：如何在html/css中更改<header>部分的高度？

<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％或摆脱“背景大小”的行和添加高度：80％宽度：100％，但只在图片底部添加空白，但实际上并没有将内容从服务部分向上移动。我试着通过编码高度来调整header.about中header元素的高度：calc（80vh），并且没有background-size行，它根本不会改变高度。我已经尝试过预先指定标题的高度为一个像高度一样疯狂的东西：100px只是为了看看它是否工作，并且仍然没有任何变化，它填充整个屏幕。我想保持对更改浏览器大小和移动浏览器的响应能力，所以我想避免必须指定像素高度的数字，即使我可以弄清楚如何使它们工作。任何人都可以请解释我怎样才能改变我的标题部分的高度，只填充视口的70-80％，或给我为什么我似乎无法改变该部分的高度的建议？

来源

2017-07-19 Lyndi

只需添加这个CSS规则：

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

来源

2017-07-19 19:14:57 eqwert

这工作就像喜欢研究小时的魅力没有。非常感谢！你是一个拯救生命的人！如果我可以通过电脑高五点，我完全可以！再次感谢你！ – Lyndi

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

回答

相关问题