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; } }
回答1件
あなたの回答
tips
プレビュー