前提・実現したいこと
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%; }
なにか解消する方法がありましたらご教示いただけますと幸いです。