しゃsheightが効かない、

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <link rel="stylesheet" href="css/styles.css">
6  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
7  <title>模写制作１回目</title>
8</head>
9  <body>
10    <div class="header">
11      <div class="header-left">
12        <div class="header-logo">
13            <input type="search" class="header-logo-a" name="submit" value="検索" >こちら！！！
14            </div>
15              <div class="header-right">
16                <ul class="header-top">
17                  <li><a href="#" class="header-btn">ログインする</a></li>
18                  <li><a href="#" class="header-btn">登録する</a></li>
19                  <li><a href="#" class="header-btn">ヘルプ</a></li>
20                  <li><a href="#" class="header-btn">ホストをはじめる</a></li>
21                </ul> <!--header-top-->
22              </div> <!--header-right-->
23            </div>  <!--header-left -->
24          </div> <!--header-->
25    <div class="main">
26    <div class="container">
27    <div class="content-top">
28      <img src="img/1.jpg">
29      <div class="content-font">
30        <h1>旅を贈ろう。</h1>
31        <p>Airbnbギフトカードで、世界をぐんと身近に</p>
32        <a href="#" class="sample"><span style="color:grey">ギフトカードを登録</span></a>
33      </div> <!--content-font-->
34    </div>
35  </div><!--container-->
36
37    <div class="content-bottom">
38      <h1 class="content-bottom-a">いつも完璧な贈り物</h1>
39      <ul class="icon">
40
41      <div class="content-bottom-btn">
42        <li> <i class="far fa-envelope  fa-3x"></i></li>
43        <h2>簡単に使える</h2>
44        <p>ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p>
45      </diV><!--content-bottom-btn-->
46
47      <div class="content-bottom-btn">
48        <li> <i class="fas fa-stopwatch  fa-3x"></i></li>
49          <h2>有効期限なし</h2>
50        <p>Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p>
51      </diV><!--content-bottom-btn-->
52
53      <div class="content-bottom-btn">
54        <li> <i class="fas fa-globe  fa-3x"></i></li>
55          <h2>忘れられない旅</h2>
56        <p>お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p>
57      </diV><!--content-bottom-btn-->
58
59    </ul><!--icon-->
60  </div> <!--content-bottom-->
61
62    <div class="bottom">
63    <h2>ギフトカードを作ったら、、、</h2>
64    <p>ログインあるいは利用登録してギフトを登録するだけです。あとは使い途をゆっくり考えましょう。</p>
65    <a href="#" class="bottom-logo">ギフトカードを登録</a>
66    <a href="#"><span style="color:grey">Airbnbギフトカードの仕組みは？</span></a>
67  </div><!--bootom-->
68  <div class="footer">
69    <div class="sita">
70    <div class="sita-kata">
71      <h4>Airbnb</h4>
72      <ul class="sita-kata-logo">
73        <li><a href="#">採用情報</a></li>
74        <li><a href="#">プレス</a></li>
75        <li><a href="#">ポリシー</a></li>
76        <li><a href="#">ヘルプ</a></li>
77        <li><a href="#">ダイバーシティ&ビロンギング</a></li>
78        <li><a href="#">アクセシビリティ対応</a></li>
79        <li><a href="#">企業情報</a></li>
80      </ul>
81    </div>
82
83    <div class="sita-kata">
84      <h4>スタッフのおすすめ</h4>
85      <ul class="sita-kata-logo">
86        <li><a href="#" class="sita-kata-logo">信頼&安全</a></li>
87        <li><a href="#">お友達紹介</a></li>
88        <li><a href="#">Airbnb Citizen</a></li>
89        <li><a href="#">出張</a></li>
90        <li><a href="#">ガイドブック</a></li>
91        <li><a href="#">Airbnbmag</a></li>
92      </ul>
93    </div>
94
95    <div class="sita-kata">
96      <h4>ホスティング</h4>
97      <ul class="sita-kata-logo">
98        <li><a href="#">ホストになる理由</a></li>
99        <li><a href="#">おもてなしの心</a></li>
100        <li><a href="#">ホストの責任</a></li>
101        <li><a href="#">コミュニティセンター</a></li>
102        <li><a href="#">体験を掲載</a></li>
103        <li><a href="#">オープンホーム</a></li>
104      </ul>
105    </div>
106
107    <div class="sita-kata">
108      <ul class="sita-kata-logo">
109        <li><a href="#">利用規約</a></li>
110        <li><a href="#">プライバシー</a></li>
111        <li><a href="#">サイトマップ</a></li>
112      </ul>
113    </div>
114    <div class="footer-bottom">
115      <div class="footer-bottom-a">
116        <a href="#">Airbnb Global Services Limited
117      観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)</a>
118    </div><!--footer-bottom-a-->
119    </div><!--footer-bottom-->
120  </div><!--sita-->
121  <div class="footer-bottom-b">
122    <a href="#" class="bottom-logo-b">日本語</a>
123    <a href="#" class="bottom-logo-b">JPY-¥</a>
124  </div><!--footer-bottom-b-->
125</div><!--footer-->
126</div><!--main-->
127    </body>
128</html>
129

css
1.header {
2  width: 883px;
3  height: 100%;
4}
5.header-left {
6  height: 100%;
7}
8.header-logo {
9  height: 100%;
10}
11.header-logo-a {
12  width: 470px;
13  height: 40px;　これが効かない
14}
15
16.header-right li {
17   list-style: none;
18   padding: 10px 10px;
19   float: right;
20    }
21
22.sita-kata {
23  text-align: center;
24  float: left;
25
26}
27.sita-kata-logo li {
28  float: left;
29}
30
31}
32.header-right a {
33  color: inherit;
34}
35.button1{
36	display:block;
37	position:relative;
38  width: 460px;
39  height: 480px;
40}
41.button1 i{
42	position:absolute;
43	top:50%;
44	left:10px;
45	margin-top:-0.5em;
46}
47.content-bottom {
48width: 100px;
49height: 100px;
50}
51.content-bottom h1 {
52  color: rgb(72, 72, 72);
53}
54.content-top {
55  position: relative;
56}
57.content-top img {
58width: 100%;
59height: 600px;
60/* padding-bottom: 90px; */
61}
62.content-font {
63  position: absolute;
64  color: rgb(255, 255, 255);
65  top: 25%;
66  left: 20%;
67
68}
69.content-font h1 {
70  font-size: 46px;
71}
72
73.sample {
74    width:144px;
75    height: 24px;
76    font-size:16px;
77    font-weight:bold;
78    text-decoration:none;
79    display:block;
80    text-align:center;
81    padding:8px 0 10px;
82    color:inherit;
83    background-color:white;
84    border:1px solid #333;
85  }
86
87  .content-bottom {
88     width: 970px;
89     height: 370px;
90  }
91   .content-bottom-a {
92     font-size: 32px;
93     text-align: center;
94     color: grey;
95   }
96
97    .content-bottom-btn {
98      margin-top: 18px;
99      text-align: center;
100      width: 33.33333%;
101      float: left;
102    }
103
104
105    .bottom {
106      background-color: #007a87;
107      width: 100%;
108      height: 450px;
109      font-weight:bold;
110      color: rgb(255, 255, 255);
111      text-align: center;
112    }
113    .bottom-logo {
114        width:144px;
115        /* height: 24px; */
116        /* font-size:16px; */
117        /* font-weight:bold; */
118        text-decoration:none;
119        display:block;
120        /* text-align:center; */
121        padding:8px 0 10px;
122        color: white;
123        background-color:pink;
124        border:1px solid #333;
125        top: 100px;
126      }
127
128
129      .footer-bottom-a {
130        display: table;
131        position: relative;
132        height: 100%;
133        width: 100%;
134      }
135      .bottom-logo-b {
136        float: right;
137        padding-bottom: 1px;
138        border: 1px solid #333;
139      }
140

HTML！！！

CSS！！！
.header-logo-a {
width: 470px;
height: 40px;　これが効かない
}

質問なんですがこちらに関して”width”は反応しますが、"height"のみ反応しないのですが原因がわかりません。
もしよければ教えていただきたいです。

写真上記の検索欄を細長いのでもう少し広げたいと思っております。

様々なところが変ですがこれからわからないなりに考えながら修復していくつもりではありますので
ご了承ください。

mepon

2019/06/27 17:54

状況がよく分からないので、出来ればキャプチャとかも貼ってください。 codepenとかで提示のコードそのまま入れてみると、問題なく縦に広がります

shinpachi

2019/06/27 18:05

写真追加させていただきました！上記の検索欄の縦の長さを変更したくheightを使っているんですが反応してくれずと言った状況になります。

yoshinavi

2019/06/28 08:08

提示のコードは指定どおり効いていますよ。

shinpachi

2019/06/28 12:10

それでは上記の検索欄をもう少し縦幅を広げたいと思うですがどのようにすれば良いでしょうか？ pxを変更しても縦幅が広がらなくわからないです。 widthは変更したら横幅広がります。

yoshinavi

2019/06/28 12:15

提示のコードと実際のコードでは違うのでしょうか？提示のコードでは設定した数値で反映されていますよ。仮に100pxとすると、100pxで表示されます。デベロッパーツールで確認してみてください。

yoshinavi

2019/06/28 12:33

キャッシュクリアしてスーパーリロードとか行っていますか？

shinpachi

2019/06/28 12:42

写真追加しました！マウスを当てているところの19pxを40pxにしたいと思っております！

yoshinavi

2019/06/29 02:12

「解決済」ですが、「!important」での解決は、今後に影響してくるので、あまりオススメしません。（場合によってはOKです。）提示画像のレイアウトのように、提示コードではなっていないように見えますので、提示以外のコードが絡んでいるかもしれませんので、その辺りを調べられると良いかと思います。

shinpachi

2019/06/29 19:15

かしこまりました！ありがとうございます！！！

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

回答4件

おす、おらgoku!

<input type="search">はwebkitのデフォルトアピアランスが適用されるそうだぞ。
<input type="file">もそうだよな。

そういう場合は

CSS
1-webkit-appearance: none;

で、オーバーライドするといいみてぇだ。

input type=search don't accept height | stack overflow

しかし、teratailはどんどんぶっ壊れてってるのかなんだかわかんねぇが、
リンクの挿入ボタンが正しく機能してねぇぞ。
どうなってんだ、これ。

投稿2019/06/27 19:45

退会済みユーザー

総合スコア0

shinpachi

2019/06/28 21:27

上記の回答で問題解決することができました！この度はありがとうございました＾＾また質問させていただく機会があると思いますのでその時はよろしくお願いします！！！

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

ベストアンサー

よく見てみたら変えたいinput要素がtype="search"なんですね
type="search"は効かないCSSがちらほらあるようです。
下記を試してみてください。

webkitのデフォルト外見をOFFにする

CSS
1input[type="search"] {
2  -webkit-appearance:none;
3}
4

input要素に直接CSSを適用する

CSS
1input[type="search"] {
2  width: 40px !important;
3}
4

これでダメならリセットcssですかねえ

投稿2019/06/28 14:16

mepon

総合スコア480

shinpachi

2019/06/28 21:25

input[type="search"] { width: 40px !important; } こちらをcssに追加したところ無事widthとheightが指定どうり動くことができました！なぜ動いたかなど一切わかっておりませんので後ほど調べて学習させていただきます＾＾この度はありがとうございました！！！！

mepon

2019/06/29 03:53

今更ですが変えたいのwidthじゃなくてheightでしたね。間違えてました。変更することができたのであれば良かったです。

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

昔私もハマった現象ですｗ
親要素の指定が絡むので、子の要素に指定しても効かないんですよね。
しかも100%指定ってのがダメなんですよ。
子はあくまで、親の高さに対して動くイメージなので、親が100%の時上手くいかない。
親、つまり最上位のbodyを100%にすれば画面に対して100%となるので、子の高さが
効いてきます。

参考に以下サイトを閲覧すれば、理解出来ると思います。
http://etc9.hatenablog.com/entry/20111027/1319730407

投稿2019/06/27 23:17