要素の幅・高さを画面サイズに合わせたい。

表示される画面サイズに特定の要素の幅・高さを合わせたいのですが、高さが画面外にはみ出てしまいます。
おそらくその要素の上にある、別の要素の高さ分がはみ出てしまっているとは思うのですが…どうすればぴったり合わせられるでしょうか？
ちなみに画面サイズに合わせたい要素はHTML内”#header-image”です。よろしくお願いいたします。

●HTML●

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <title></title>
</head>

<body>
  <header>
    <div id="menu">
      <div id="header-logo"><img src="2hearts-logo-2.png"></div>
      <ul id="menu-list">
        <li><a href="about.html">about</a></li><li>
        <a href="material.html">material</a></li><li id="sitename">
        <a href="index.html"><span>2heartS</span></a></li><li>
        <a href="template.html">template</a></li><li>
        <a href="bookmark.html">bookmark</a></li>
      </ul>
    </div>
  </header>

  <div id="header-image">
    <p></p>
  </div>

<!--省略-->

<script src="res-menu.js"></script>
</body>
</html>

●CSS●

@charset "utf-8";

* {
  box-sizing: border-box;
}

/*ここから共通の設定*/

html, body {
  height: 100%;
}

body {
  font-family: '游ゴシック体', 'Yu Gothic', 'YuGothic', 'ＭＳ ゴシック', sans-serif;
  font-weight: 500;
  color: rgb(100,100,100);
}

body, header, p, ul {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  transition: 0.2s;
  color: rgb(120,120,120);
}

a:hover {
  opacity: 0.7;
}

header, #wrapper, footer {
  width: 100%;
} 

footer {
  text-align: center;
}

ul {
  list-style: none;
}

/*ここまで共通の設定*/

/*ここからパソコン用*/

@media (min-width:960px){
  #res-header {
    display: none;
  }
  
  header {
    text-align: center;
    width: 100%;
  }
  
  #header-image {
    width: 100%;
    height: 100%;
    background-image: url(header2.jpg);
    background-size: cover;
    display:flex;
    -webkit-align-items: center;
    -webkit-justify-content: center; 
    align-items: center; /*上下中央*/
    justify-content: center; /*左右中央*/
  }
  
  #header-image p {
    color: rgba(255,255,255,0.7);
    font-size: 150%;
  }

  #header-logo {
    padding: 10px;
  }
  
  #menu {
    width: 100%;
    background-color: rgb(255,255,255);
  }
  
  #menu-list {
    width: 100%;
    text-align: center;
    background-color: rgb(255,255,255);
  }

  #menu-list li {
    display: inline-block;
  }

  #menu-list li a{
    display: block;
    padding: 15px;
    color: rgb(0,0,0);
  }
  
  .fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.1);
  }
}

/*ここまでパソコン用*/

行動規範の内容に同意します

回答2件

ベストアンサー

ヘッダーの高さを固定とすれば、
header-imageの高さを、calcで計算しちゃえばいいと思います。

css
1#header-image {
2    height: calc(100vh - 98px);
3}

投稿2018/02/28 12:35

kszk311

総合スコア3404

aazzkk

2018/03/01 06:30

無事できました。ありがとうございました。

行動規範の内容に同意します

あらゆるブラウザに高さを合わせたいと言うのであれば、JavaScriptで高さを取得してheader-imageにブラウザの高さからヘッダーの高さを引いてあげた数値を付与してあげれば良いと思いますよ。

投稿2018/02/28 12:27

編集2018/02/28 12:28

退会済みユーザー

総合スコア0

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.40%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

要素の幅・高さを画面サイズに合わせたい。

関連した質問