🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Haml

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

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

Q&A

解決済

1回答

1683閲覧

footer 最下部 余白

yakumo02

総合スコア103

Haml

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

CSS

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

0グッド

0クリップ

投稿2019/12/10 12:48

footerの最下部に余白ができてしまいます
すみません、容量の関係で見にくい画像です
イメージ説明

main-headerが一番上の水色のheaderです
messagesが真ん中の雲の画像の部分です
messageは一つ一つのコメントです
formがフッターです

調べてみるとfooterに position:absolute
bottom: 0
のやり方があったので試したのですが、下の余白は無くなりましたが今度は上に余白ができてしまいました
宜しくお願いします

*{text-decoration: none;} .notice { color: white; background-color: #38AEF0; font-size: 1rem; font-weight: lighter; text-align: center; width: 100vw; .chat-main{ width: 100vw; float: left; } .main-header { display: flex; box-sizing: border-box; height: 70px; width: 100%; padding: 0 40px; background-color: #32caf0ef; &__edit-btn{ display: block; color: #38AEF0; height: 40px; line-height: 40px; padding: 0 20px; margin-top: 30px; border: solid 1px #38aef0; position: absolute; top: 5px; right: 40px; } &__left-box { justify-content: space-between; margin:5px 0 0px 0; } ul.main-header__left-box__member-list{ display: inline; font-size:12px; color: #999999; } li.main-header__left-box__member-list__member{ display: inline; font-size: 12px; } h2.main-header__left-box__current-group{ font-size: 20px; color: #333333; margin-bottom: 5px; } } .messages { width: 100vw; height: calc(100vh - 190px); padding: 46px 40px; box-sizing: border-box; background-color: #fafafa; overflow: scroll; background: url(https://cdn.pixabay.com/photo/2012/06/08/06/19/sky-49520_1280.jpg); background-size: cover; } .message{ padding-bottom: 40px; &__upper-info{ display: flex; margin-bottom: 10px; } p.message__upper-info__talker{ font-size: 16px; font-weight: bold; } p.message__upper-info__date{ font-size: 12px; color: #000000; margin:0 0 0 10px; } } .form { width: 100%; background-color:#32caf0ef; box-sizing: border-box; height: 90px; padding: 20px 50px 20px 40px; float:right; position: absolute; &__message { border: none; float: left; width: calc(100vw - 300px); height: 50px; margin-left: 40px; } &__mask { background-color: white; float: left; height: 50px; &__image { font-size: 20px; line-height: 50px; padding-right: 10px; } .hidden { display: none; } } &__submit { background-color: #38AEF0; border: none; color: white; float: right; font-size: 16px; height: 50px; margin-left: 10px; padding: 0 30px; } }

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

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

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

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

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

kyoya0819

2019/12/10 13:13

RailsとHTMLをご提示ください。
guest

回答1

0

ベストアンサー

.messages が height: calc(100vh - 190px); になってます。
この190って合ってます? footer のhightの定義が見当たらないので、中身に応じた高さになってて、合わせて190にならないのでは?

投稿2019/12/10 13:17

winterboum

総合スコア23567

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問