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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

5281閲覧

html要素に勝手にheight: auto;があたってしまう

yuichikubo

総合スコア12

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/01/07 13:22

編集2022/01/12 10:55

前提・実現したいこと

RailsでAdmin-LTEを用いて業務用管理画面を実装しております。

発生している問題・エラーメッセージ

エラーメッセージは出ておりませんが、どの画面でも勝手にhtml要素に以下が混入し、アプリの高さが画面幅より狭くなってしまいます。

element.style { height: auto; min-height: 100%; }

実際のコード

application.html.erb <!DOCTYPE html> <html> <head> <title>sample</title> <meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="VRMpDebiADXj7KoYgVVrvWn9/nyeH9PhBy97UJBXrYnmT9fck4UtcSqp8NJIPOn2LTl7nfXeh4bLVaKZ5f2v6w==" /> <link rel="stylesheet" media="all" href="/assets/application.self-0d47818663da83b658207efef64aca4ae6dbcb413948c6934ab7347e1cd1d42b.css?body=1" data-turbolinks-track="reload" /> <script src="/assets/rails-ujs.self-d109d8c5c0194c8ad60b8838b2661c5596b5c955987f7cd4045eb2fb90ca5343.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/activestorage.self-1ed4604ac2170045f1ffca4edb81a75246661555e4f9cf682bb8a21825e32e1c.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/action_cable.self-69fddfcddf4fdef9828648f9330d6ce108b93b82b0b8d3affffc59a114853451.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/jquery/dist/jquery.min.self-875821d1e3121b366b94ea86a07f3cbc5c76cb16a319bc62212c03a805ff20e9.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/bootstrap/dist/js/bootstrap.min.self-5c33978cbd9512ac9b1435ad03674e9be476f21c55f63f20b3680c477076da83.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/admin-lte/dist/js/adminlte.min.self-434306ae78acd043e4442bbb7a36374cedc94997085b8609d472aa6557af7585.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/admin-lte/plugins/iCheck/icheck.self-1042e391fddad5e4312167f5749c528fa1536121cb78dba02656d5e85e2a1319.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/application.self-6a7f81c89608537f1c0b5e6e1a1cad14caec515ae09b88e0406efa9bcbfd4752.js?body=1" data-turbolinks-track="reload"></script> </head> <body class="skin-black"> <div class="wrapper"> <header class="main-header"> <!-- Logo --> <a href="/" class="logo"> <!-- mini logo for sidebar mini 50x50 pixels --> <span class="logo-mini"><b>S</b></span> <!-- logo for regular state and mobile devices --> <span class="logo-lg"><b>Sample</b></span> </a> <nav class="navbar navbar-static-top"> <!-- Navbar Right Menu --> <div class="navbar-custom-menu"> <ul class="nav navbar-nav"> <!-- User Account Menu --> <li class="dropdown user user-menu"> <!-- Menu Toggle Button --> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <!-- The user image in the navbar--> <!-- hidden-xs hides the username on small devices so only the image appears. --> <span class="hidden-xs">@test</span> </a> <ul class="dropdown-menu"> <!-- Menu Body --> <li class="user-body"> <div class="row"> <div class="col-xs-6 text-center"> <a href="/users/edit">マイページ</a> </div> <div class="col-xs-6 text-center"> <a rel="nofollow" data-method="delete" href="/users/sign_out">ログアウト</a> </div> </div> <!-- /.row --> </li> </ul> </li> <!-- Control Sidebar Toggle Button --> <li> <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a> </li> </ul> </div> </nav> </header> <!-- Main Sidebar --> <aside class="main-sidebar"> <section class="sidebar"> <ul class="sidebar-menu"> <li class="header">機能一覧</li> <li><a href="/scenarios">一覧</a></li> <li><a href="/scenarios/new">作成</a></li> </ul> </section> </aside> <div class="content-wrapper"> <section class="content-header"> <h1>トップページ</h1> </section> <section class="content"> </section> </div> <!-- Main Footer --> <footer class="main-footer"> <!-- To the right --> <div class="pull-right hidden-xs"> </div> </footer> </div> </body> </html>
application.css 特に記述はありません

試したこと

・application.cssに以下のように記載

html{ height: 100%; }

・html要素にstyle要素をべた書き

<html style="height: 100%;">

・html要素にstyle要素をべた書き(!important使用)

<html style="height: 100% !important;">

補足情報(FW/ツールのバージョンなど)

admin-LTEのcssファイルには最初から以下が書かれているんですが、効きませんでした。

html, body { height: 100%; }

なにか解消する方法がありましたらご教示いただけますと幸いです。

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2019/01/07 13:50

書かれている状況が再現するコード(HTML/CSS/JavaScriptなど)か、再現するURLを提示されたほうが回答を得やすいと思います。
退会済みユーザー

退会済みユーザー

2019/01/07 15:22 編集

HTMLに記載されている「height:100 !important;」は、もしかしたら「height:100% !important;」のことではないでしょうか…??HTMLに直接styleを用いるのであればcssのように記述する必要があるかもしれません。つたない提案ですがなにかのお役に立てたら幸いです。
退会済みユーザー

退会済みユーザー

2019/01/07 23:48

読み込まれてるjsとブラウザから見れるhtmlにコードを差し替えようか
yuichikubo

2019/01/07 23:53

kei344様 ありがとうございます! 少し修正しました。
yoshinavi

2019/01/08 01:40

Chromeのデベロッパーツールで「element.style」に表示される場合は、インラインCSSやJSによるものが多いので、「asahina1979」さんのコメントのとおりJSの提示や確認もされると良いかと思います。また、質問のタグも適切な物を追加してください。 参考先: https://ja.stackoverflow.com/questions/32294/style%E5%B1%9E%E6%80%A7%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%97%E3%81%A6%E3%81%84%E3%82%8Bjavascript%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E5%A0%B4%E6%89%80%E3%82%92%E8%AA%BF%E3%81%B9%E3%82%8B%E3%81%AB%E3%81%AF
yuichikubo

2019/01/08 05:48

asahina様 yoshinavi様 ありがとうございます htmlはブラウザから「ページのソースを表示」で確認できるものを貼りました
yuichikubo

2019/01/08 05:49

leth様 申し訳ありません。 あれは私の記載ミスでしたので修正しました。 コメントありがとうございます!
guest

回答1

0

上書きできるようであれば、

css

1html, body{min-height: 100vh;}

を試してみてもいいかもしれません。

投稿2019/01/07 15:44

gamips

総合スコア60

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/01/07 23:46

オプションがない場合タグ(element)に書かれてるものが最優先だよ
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問