@POSOposted at 2022-03-04

htmlのページにて、cssがうまくいかない

Q&A

解決したいこと

下のバーが常に画面の一番下に表示されるようにしたいです

発生している問題・エラー

.connectbar {
  height: 15vh;
  bottom: 0;
  color:#000000;
  width: 100%;
  background-color: #f0f0f0;
  text-decoration: none;
  position:absolute
}

これだと常にバーが一番下に表示されますが、高さがあるページなどではスクロールしても動かず、途中に来てしまいます

.connectbar {
  height: 15vh;
  bottom: 0;
  color:#000000;
  width: 100%;
  background-color: #f0f0f0;
  text-decoration: none;
}

これだと高さがあるページでも問題なく一番下ですが、高さがないページだと、下に余白ができます、またChromeだとうまく表示されません

  font-size: 18px;
  background: whitesmoke;
  margin: 0 auto;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  padding:0;
  margin:0;
  padding-bottom: 15vh;

これがボディです

1Answer

@_y_s posted at 2022-03-04

HTMLが不明なので想像ですが

html {
  height: 100%;
}

ではダメですか？

0Like

Comments

@POSO
Questioner
高さが低いページだとやはりめり込んでしまいます
@_y_s
HTMLのコードが無いので的確な回答はできませんが、`position: fixed;`で事足りそうなのですがどうですか。
@POSO
Questioner
htmlのコードは書いていません
bodyに
.body {
font-size: 18px;
background: whitesmoke;
margin: 0 auto;
height: 100%;
position: relative;
box-sizing: border-box;
padding:0;
margin:0;
}
こう設定しています
fixedは下のバーがついていく使用ですが
自分はページの高さに関係なく常に画面の一番下にあり、固定されているという設定にしたいです
@_y_s
HTMLのコードを掲載してもらわなければ要素同士の関係が分かりませんので、的確な回答ができないということです。

> ページの高さに関係なく常に画面の一番下にあり、固定されているという設定

「ページ（コンテンツ）の高さに関係なく常に画面（スクリーン）の一番下に固定」ならば必然的に「下のバーがついていく」と思うのですが違うのでしょうか？

言葉選びの問題か分かりませんが、提供されている情報ですと申し訳ないですがこの回答が精一杯です。
@POSO
Questioner
<html>
<head>
<%= render partial: "hoges/toptemplate" %>
</head>
<body>
</body>
<%= render partial: "hoges/bottomtemplate" %>
</html>
すみません、勘違いしていました
問題のコネクトバーですがbottomtemplateにかかっています
@_y_s
bodyの外にあるのが間違いじゃないですか？（スタイルが適用されないと思います。）
@POSO
Questioner
<html>
<head>
<%= render partial: "hoges/toptemplate" %>
</head>
<body>
<h1>くりかえし</h1>
<div>
<table border="1" width="80%" height="20%">
<tr>
<th width="35%"></th>
<th width="15%"></th>
<th width="15%"></th>
<th width="15%"></th>
</tr>
<% @hoges.each do |hoge| %>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<% end %>
</div>

<%= render partial: "items/bottomtemplate" %>
</body>
</html>
bodyの中に入れましたがやはり上にめり込んでしまいます
この場合は高さがないので上にめり込み、高さがある場合はスクロールの途中にあらわれます
@_y_s
CSSで.bodyにしているならばclass=bodyにしないといけないんじゃないですか？（そもそもCSSもクラスなしで不都合はないと思いますけど）
@POSO
Questioner
bodyに表記を変更しましたがやはりめり込みが起こりました
@POSO
Questioner
現在は
body {
font-size: 18px;
background: whitesmoke;
margin: 0 auto;
height: 100%;
position: relative;
box-sizing: border-box;
padding:0;
margin:0;
}
こうなっています

Are you sure you want to delete the question?