如何在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>部分的高度？

回答

相關問題