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

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

ただいまの
回答率

89.65%

HTML5 heightのレスポンシブ対応をどうやってやればいいですか?

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 7,713

sakura_k

score 5

おせわになっております。
助けてください。。

HTML5で現在、レスポンシブ対応のサイトを作っています。

ウインドウを縦、横に動かしてもサイトがその幅に合わせて伸縮するといいますか、
あんまり文章が思いつかず申し訳ないですが、
そのようなことをしたいのです。

その際、CSSで幅と高さを%表示にて
レスポンシブさせようとしているのですが、
どうしても「高さ」がレスポンシブ対応になりません。。

どうかご教示いただけましたら幸いです。
宜しくお願いいたします。。

HTMLを載せます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div id="wrapper">
            <section>
                <form action="#" method="post">
                        <button type="submit" id="section_submit">ログアウト</button>
                </form>
                <h2 id="h2_section">eee</h2>
                <div class="chatroom_section">
                    <div class="chatroom_say_left">
                        <p>
                            TO<br>
                            <img src="images/flower2.jpeg" alt="花" id="chatroom_left_img"><br>
                        </p>
                    </div>
                    <div class="chatroom_say_front">
                        <p class="balloon-1-left">
                            行間は「1.5em(20pxくらい)」<br>
                        </p>
                    </div>
                    <div class="chatroom_say_front_right">
                        <p class="balloon-2-right">
                            左と同じ
                        </p>
                    </div>
                    <div class="chatroom_say_right">
                        <p>
                            TO:<br>
                            <img src="images/flower.png" alt="花" class="chatroom_right_img"><br>
                        </p>                        
                    </div>
                    <div class="day">
                        <p>2016/11/21(月)<br><hr></p>
                    </div>
                </div>
                <div id="chatroom_config">
                    <div id="chatroom_top">
                        仮ボックス
                    </div>
                    <div id="chatroom_bottom">
                        <div id="chatroom_bottom_left">
                            <p><img src="images/flower4.png" alt="花" id="chatroom_img"></p>
                            <p>
                                佐藤、鈴木<br>
                                <span id="square_color"></span>&nbsp;なんか入れる
                            </p>
                        </div>
                        <div id="chatroom_bottom_right">
                            <form action="#" method="post" id="chatroom_sendform">
                                <label>
                                    <textarea name="chatroom_send_info" placeholder="" 
                                        id="chatroom_info" form="chatroom_sendform" maxlength="1001" required></textarea>
                                </label>
                                <button type="submit" id="sendsubmit">example</button>
                            </form>
                        </div>
                    </div>
                </div>
            </section>
            <aside>
                <h2 id="aside_h2">イメージ一覧</h2>
                    <div id="over">
                        <div class="front_aside">
                            <div class="left_aside">
                                <p><img src="images/flower.png" alt="花" class="img_aside"></p>
                            </div>
                            <div class="right_aside">
                                <p>
                                    花子
                                </p>
                            </div>
                        </div>
                    </div>
            </aside>
        </div>
        <footer>
            <hr>
            Copyright&nbsp;&copy;
        </footer>
    </body>
</html>

CSSを載せます。

@charset "utf-8";

/* all reset */
html {
    height: 100%; 
}

body {
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    font-family: "MS ゴシック",sans-serif,"Hiragino Kaku Gothic Pro",Meiryo, Osaka,"MS PGothic", sans-serif;
    clear: both; 
}

img {
    margin: 0; 
    padding: 0; 
}

/* wrapper */
/* 1366(横) * 768(縦) */
#wrapper {
    background-color: skyblue; 
    width: 100%; 
    margin: auto; 
    margin-top: 30px; 
    padding: auto; 
    border-top: solid 1px black; 
    border-left: solid 1px black; 
    border-bottom: solid 1px black; 
}

/* section */
section {
    float: right; 
    clear: both; 
    width: 75%; 
    height: 100%; 
    margin-bottom: 20px; 
    line-height: 2em;     
    border-right: solid 1px black; 
}

section .chatroom_section {
    margin: auto; 
    padding: auto; 
    text-align: center; 
    line-height: 1.5em; 
    width: 95%; 
    height: 515px; 
    overflow-y: scroll; 
    border: solid 1px black; 
    background-color: #fafafa; 
    clear: both; 
}


section .chatroom_section .chatroom_say_left {
    float: left; 
    margin: 0; 
    padding: 0; 
    width: 20%; 
    height: 15%; 
    clear: both; 
}

section .chatroom_section .chatroom_say_left p {
    color: #5a5a5a; 
    margin: 0; 
    padding: 0; 
    padding-top: 40px; 
    font-size: 10px; 
    clear: both; 
}

section .chatroom_section .chatroom_say_left #chatroom_left_img {
    margin: 0; 
    padding: 0; 
    padding-top: 5px; 
    width: 35%; 
    height: 50%; 
    clear: both; 
}

section .chatroom_section .chatroom_say_front { 
    float: left; 
    width: 80%; 
    padding-top: 40px; 
}

section .chatroom_section .chatroom_say_front_right {
    float: left; 
    width: 80%; 
}

.chatroom_say_right {
    float: right; 
    margin: 0; 
    width: 20%; 
    height: 15%; 
}

.chatroom_say_right p {
    color: #5a5a5a; 
    margin: 0; 
    padding: 0; 
    padding-top: 10px; 
    font-size: 10px; 
}

.chatroom_right_img {
    margin: 0; 
    padding: 0; 
    padding-top: 5px; 
    width: 35%; 
    clear: both; 
}

.day {
    clear: both; 
}

.day p {
    color: #808080; 
    font-size: 12px; 
}

.day hr {
    width: 95%; 
}

section h2#h2_section {
    margin-top: 40px; 
    margin-left: 25px; 
}

section #chatroom_config {
    margin: auto; 
    margin-top: 10px; 
    padding: auto; 
    width: 95%; 
    clear: both; 
}

section #chatroom_config #chatroom_top {
    margin: auto; 
    padding: auto; 
    width: 100%; 
    height: 45%; 
    border: solid 1px black; 
    text-align: center; 
}

/* section chatroom_bottom */
section #chatroom_config #chatroom_bottom {
    margin: auto; 
    margin-top: 10px; 
    padding: auto; 
    width: 100%; 
    height: 85px; 
    text-align: center;     
    border: solid 1px black; 
    clear: both; 
}

section #chatroom_config #chatroom_bottom #chatroom_bottom_left {
    float: left; 
    width: 30%; 
    height: 100%; 
    margin: auto; 
    padding: auto; 
    clear: both; 
}

section #chatroom_config #chatroom_bottom #chatroom_bottom_left #chatroom_img {
    margin-left: 20px; 
    width: 22%; 
    float: left; 
}

#square_color {
    color: cyan; 
}

section #chatroom_config #chatroom_bottom #chatroom_bottom_right {
    float: right; 
    width: 70%; 
    height: 76px; 
    margin: auto; 
    margin-top: 5px; 
    padding: auto; 
}

section #chatroom_config #chatroom_bottom #chatroom_bottom_right textarea {
    width: 80%; 
    height: 70px; 
    margin: auto; 
    padding: auto; 
}

/* section submit */
section button#section_submit {
    float: right; 
    margin-top: 20px; 
    margin-right: 20px; 
    padding: 5px; 
    background-color: #ffff7f; 
    clear: both; 
}

/* form */

textarea#chatroom_info {
    float: left; 
    font-size: 15px; 
}

textarea#chatroom_info:focus {
    background-color: pink; 
}

button#sendsubmit {
    width: 15%; 
    height: 70px; 
    margin-top: 3px; 
    background-color: #84c1ff ; 
    font-size: 20px; 
}

button#sendsubmit:hover {
    color: white; 
    font-size: 25px; 
    font-style: italic; 
    text-shadow: 3px 3px 5px deeppink; 
    background-color: firebrick; 
}    

/* aside */
aside {
    float: left; 
    width: 23%; 
    height: 758px; 
    padding-top: 1px; 
    line-height: 1.5em; 
    text-align: center; 
    border-right: solid 1px black; 
    border-bottom: solid 1px black; 
}

aside #over {
    background-color: green; 
    height: 700px; 
    overflow-y: scroll; 
    width: 98%; 
    margin-left: 1%; 
}

aside .front_aside {
    width: 90%; 
    margin: auto; 
    padding: auto; 
    padding-top: 1px; 
    clear: both;     
    border-bottom: solid 1px black; 
    background-color: yellow; 
}

aside .front_aside .left_aside {
    float: left; 
    margin: auto; 
    margin-top: 4px; 
    padding: auto; 
    width: 40%; 
    clear: both; 
}

aside .front_aside .left_aside .img_aside {
    margin: 0; 
    padding: 0; 
    width: 60%; 
    height: 100%; 
}

aside .front_aside .right_aside {
    float: right; 
    margin: auto; 
    margin-top: 20px; 
    padding: auto;
    width: 60%; 
}

aside .front_aside .right_aside .rightaside_states {
    color: cyan; 
}

/* footer */
footer {
    width: 90%;
    height: 90%; 
    margin: auto; 
    margin-bottom: 35px; 
    padding: auto; 
    padding-top: 20px;     
    clear: both; 
}

footer hr {
    margin-top: 20px; 
    margin-bottom: 35px; 
    clear: both; 
}

/* link */
a:link {

}

a:visited {

}

a:focus {

}

a:hover {

}

a:active {

}

/* 吹き出し 左 */
section .chatroom_section .chatroom_say_front .balloon-1-left {
    display: inline-block; /* コメントの文字数に合わせて可変 */
    padding: 15px 20px;
    margin-top: 8px; 
    margin-right: 80px; 
    border-radius: 30px;
    position: relative; 
    background-color: #D9F0FF; 
    text-align: left; 
    width: 80%; 
}

section .chatroom_section .chatroom_say_front .balloon-1-left:after {
    content: "";
    position: absolute;
    top: 20px; left: -30px;
    margin-top: -10px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 40px 40px 40px 0px;
    border-color: transparent #D9F0FF transparent transparent;
}

/* 吹き出し 右 */
section .chatroom_section .chatroom_say_front_right .balloon-2-right {
    display: inline-block; /* コメントの文字数に合わせて可変する処理 */
    padding: 15px 0px 15px 15px ;
    margin-left: 50px; 
    border-radius: 30px;
    position: relative;    
    text-align: left;
    background: #ffa3d1; 
    width: 80%; 
}

.balloon-2-right:before {
    content: "";
    position: absolute;
    top: 10%; right: -70px; /* 三角の吹き出し部分の位置を決める */
    display: block;
    border-style: solid;
    border-width: 40px 40px 40px 40px;
    border-color: transparent transparent transparent #ffa3d1;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/12/02 15:24

    質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

    キャンセル

  • sakura_k

    2016/12/04 11:51

    kei344さま 失礼いたしました。修正いたしました!teratailも慣れてなくてすみません。。よろしくお願いいたします。

    キャンセル

回答 3

+3

ソースコードが断片的で正しい回答か分かりませんが、height: 100%; としたい場合、親要素に height: 100%; を指定する必要があります。

<html>
<body>

<div class="example"></div>

</body>
</html>

このようなHTMLだった場合、

html, body 
{
  height: 100%;
}
.example 
{
  height: 100%;
}

IE10+対応なら

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<style>
* 
{
  margin: 0;
  padding: 0;
}
html,
body 
{
  height: 100%;
}
.container 
{
  display: -webkit-box;   /* Android */
  display: -webkit-flex;  /* Safari */
  display: -ms-flexbox;   /* IE10 */
  display: flex;
  -webkit-box-direction: column;   /* Android */
  -webkit-flex-direction: column;  /* Safari */
  -ms-flex-direction: column;      /* IE10 */
  flex-direction: column;
  height: 100%;
}
.wrapper 
{
  display: -webkit-box;   /* Android */
  display: -webkit-flex;  /* Safari */
  display: -ms-flexbox;   /* IE10 */
  display: flex;
  -webkit-box-flex: 1;  /* Safari */
  -ms-flex: 1;   /* IE10 */
  flex: 1;
  position: relative;
}
.inner 
{
  display: -webkit-box;   /* Android */
  display: -webkit-flex;  /* Safari */
  display: -ms-flexbox;   /* IE10 */
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.inner.column 
{
  -webkit-box-direction: column;   /* Android */
  -webkit-flex-direction: column;  /* Safari */
  -ms-flex-direction: column;      /* IE10 */
  flex-direction: column;
}
.inner.scroll 
{
  overflow-y: auto;
}
.side 
{
  width: 25%;
  height: 100%;
  background: green;
  overflow-y: auto;
}
.main 
{
  position: relative;
  width: 75%;
  height: 100%;
}
.content 
{
  position: relative;
  -webkit-box-flex: 1;  /* Safari */
  -ms-flex: 1;   /* IE10 */
  flex: 1;
}
</style>
<body>

<div class="container">
  <div class="wrapper">
    <div class="inner">
      <aside class="side">
        side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>
        side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>
        side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>
        side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>
        side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>
        side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>side<br>
      </aside>
      <section class="main">
        <div class="inner column">
          <div class="content">
            <div class="inner scroll">
              content<br>content<br>content<br>content<br>content<br>content<br>content<br>
              content<br>content<br>content<br>content<br>content<br>content<br>content<br>
              content<br>content<br>content<br>content<br>content<br>content<br>content<br>
              content<br>content<br>content<br>content<br>content<br>content<br>content<br>
              content<br>content<br>content<br>content<br>content<br>content<br>content<br>
              content<br>content<br>content<br>content<br>content<br>content<br>content<br>
              content<br>content<br>content<br>content<br>content<br>content<br>content<br>
            </div>
          </div>
          <div class="box">仮ボックス</div>
          <div class="chat">chat</div>
        </div>
      </section>
    </div>
  </div>
  <footer class="footer">
    Copyright...
  </footer>
</div>

</body>
</html>

こんな感じですかね。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/04 13:11

    コメント、いつもありがとうございます。

    対応ブラウザですが、一応IE11、chrome、firefoxだったと記憶してます。。
    IE10+というブラウザってあるんですね!
    色々初めて知ることが多くてうれしいです><

    #wrapper {
    margin-top: 30px;
    }
    は、確かヘッダーとの距離を少し空けたくて取った幅だったと
    思いますが、いらなそうであればご指摘いただけましたら幸いです。

    宜しくお願いいたします。

    キャンセル

  • 2016/12/05 08:16

    IE 10以降のいみぞw プラスとよんではいけない

    キャンセル

  • 2016/12/05 13:18

    コメントありがとうございます。
    えっ、そういう意味なんですね。。恥ずかしい…。。
    ご指摘ありがとうございます><;

    キャンセル

checkベストアンサー

+2

heightをレスポンシブっぽく動かしたいならこんなものではないでしょうか(質問が完全に理解できていないかも)
質問者さんのやりたいことはflexプロパティで実現できると思いましたので、一応回答をします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>タイトル</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body, html {
            height: 100%;
        }

        header {
            height: 114px;
            background: black;
            color: white;
        }

        section {
            flex: 1;
            background: white;
        }

        footer {
            height: 514px;
            background: black;
            color: white;
        }

        .wrapper {
            display: flex;
            height: 100%;
            flex-direction: column;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <header>
        ヘッダ
    </header>
    <section>
        <h1>それぞれレスポンシブっぽい</h1>
    </section>
    <footer>
        フッタ
    </footer>
</div>
</body>
</html>

補足

反転しているという状況がわかりませんが、cssを見る限りこのようなデザインを目指しているのでは?と思ったので追記します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>タイトル</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body, html {
            height: 100%;
        }

        header {
            height: 150px;
            background: green;
            color: white;
        }

        section {
            flex: 1;
            background: white;
        }

        footer {
            height: 150px;
            background: green;
            color: white;
        }

        .wrapper {
            display: flex;
            height: 100%;
            flex-direction: column;
        }

        .nav {
            background: red;
            height: 100%;
            width: 20%;
            float: left;
        }

        .main {
            background: blue;
            height: 100%;
            width: 80%;
            float: right;
            color: white;
        }

    </style>
</head>
<body>
<div class="wrapper">
    <header>
        ヘッダ
    </header>

    <section>
        <div class="nav">
            <h1>サイド</h1>
        </div>
        <div class="main">
            メイン
        </div>
    </section>

    <footer>
        フッタ
    </footer>
</div>
</body>
</html>


これはヘッダとフッタの高さが固定で、section内の要素が高さに応じて変化します(実行するとどんな感じかはこちら)。
もしsectionの子孫要素に高さが指定してあるものがあるときは、その要素に高さをあわせようとするので、高さは変化しなくなります(高さが変化しなくなるときのサンプルはこちら)。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/07 07:20

    ならよかったです。
    ぜひがんばってください

    キャンセル

  • 2016/12/08 10:44

    すみません。もう一つ質問が浮かびましたので、ご教示いただけましたら嬉しいです。。

    flex-direction: column; で、各ボックスをフレックスにできたのですが、
    縮む倍率といいますか、速さといいますか、ウィンドウを狭めたときに
    縮む率は決めることができるのでしょうか?

    キャンセル

  • 2016/12/11 03:36

    .navと.mainのwidthの%を変化させることで縮む率を変更することができると思います。
    縮む倍率についていまいち理解できていないところがあるので、的外れなことを言っているかもしれませんが。

    キャンセル

0

「高さ」がレスポンシブ対応になりません。

背景画像のことでしょうか。background-size: cover; で画面いっぱいになります。

【CSS の background-size での cover、contain、auto の違い - Web/DB プログラミング徹底解説】
http://keicode.com/script/css-background-size.php

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/07 06:48

    いつもご指摘ありがとうございます!
    図示とは、どのようなことを行えばよいでしょうか?
    質問のところを編集して、何か図を入れるということでしょうか?

    キャンセル

  • 2016/12/07 13:08

    「図示」の意味がわかりにくかったでしょうか・・・。
    他の方の回答&コメントで解決しそうなので、がんばってください!

    キャンセル

  • 2016/12/08 10:46

    いつもご指摘ありがとうございます!
    はい、もうすぐで何とかなりそうですが、もう一歩です><
    頑張ります!

    ごめんなさい、図示がよくわかりませんでした。。

    キャンセル

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

  • ただいまの回答率 89.65%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる