footer 하단 고정 질문입니다
본문
페이지 크기가 줄어들면 모바일로 보았을때 푸터가 중간에 와있는데 항상 제일 밑에 고정 할 수 없을까요?
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/osaka1234.css"/>
<script type="text/javascript" src="pra/osaka.js"></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<link href="https://fonts.googleapis.com/css?family=Kosugi&display=swap&subset=japanese" rel="stylesheet">
<style media="screen">
body{
font-family: 'Kosugi' ;
font-weight: 400;
}
</style>
</head>
<body>
<div class="top">
<header>
<div class="header">
<img src="images/logo.png" alt="" class="pointer" onclick="location.href='/';">
</div>
</header>
<div class="frame">
<div id="container">
<div class="col-75 margincenter">
<input type="text" id="fname" name="firstname" placeholder="検索したいワードを入力してください...">
<button class="button1 button5"><i class='fab fa-sistrix' style=' font-size: 15px; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; padding-right: 5px;'></i>検索</button>
</div>
<br>
<div class="tag">
おすすめタグ
</div>
<div class="middlebutton" aria-hidden="true">
<input type="button" class="minibutton1" value="グルメフェス">
<input type="button" class="minibutton1" value="レストラン・カフェあり">
<input type="button" class="minibutton1" value="祭礼（春）">
</div>
<div class="tag1">
エリアで絞り込む
</div>
<div class="select">
<select id="country" name="country">
<option value="australia">天王寺・阿倍野・新世界エリア</option>
<option value="canada">中之島・淀屋橋・本町エリア</option>
<option value="usa">上本町・鶴橋エリア</option>
<option value="australia">大阪城・鶴見緑地エリア</option>
<option value="canada">堺・泉北エリア</option>
<option value="usa">大阪南東部エリア（南河内）</option>
</select>
</div>
<div class="narabi">
<span class="innarabi">並び替え</span>
<select id="country" name="country" class="inselect">
<option value="australia">Relevance</option>
<option value="canada">人気順 (昇順)</option>
<option value="usa">人気順 (降順)</option>
<option value="australia">Date (ASC)</option>
</select>
</div>
<hr style="width:100%; margin:0 auto; margin-top:1%;">
</div>
<div class="vvvv">
<div class="aaaa1">
<div class="efct" onclick="location.href='magic';">
<img src="images/cards-416960_1920.jpg" alt="">
<div class="overlay">
<div class="text">
イリュージョン...
</div>
<div class="text1">
視て、体感せよ!! 至近距離で見る”進化型イリュージョンショー"
</div>
</div>
</div>
<div class="efct" onclick="location.href='osakakoen';">
<img src="images/landscapes-4277848_1920.jpg" alt="">
<div class="overlay">
<div class="text">
大阪城公園
</div>
<div class="text1">
大阪城天守閣をはじめ、西の丸庭園、梅林、大阪城ホール、弓道場などの施設がある(...)
</div>
</div>
</div>
<div class="efct" onclick="location.href='maruteien';">
<img src="images/osaka-469865_1920.jpg" alt="">
<div class="overlay">
<div class="text">
大阪城西の丸庭園
</div>
<div class="text1">
堀の向こうに天守閣を仰ぐ緑豊かな庭園。春には300本の桜が咲き競い、花見客で(...)
</div>
</div>
</div>
</div>
<div class="aaaa1">
<div class="efct" onclick="location.href='wasen';">
<img src="images/santa-maria-1218812_1920.jpg" alt="">
<div class="overlay">
<div class="text">
天下一の黄金の...
</div>
<div class="text1">
大阪城のお濠めぐりができる黄金色の御座船が登場！季節ごとに移りゆく景色の中、(...)<br>
</div>
</div>
</div>
<div class="efct" onclick="location.href='hotelteikoku';">
<img src="images/hotel-1749602_1920.jpg" alt="">
<div class="overlay">
<div class="text">
帝国ホテル 大阪
</div>
<div class="text1">
大川べりの桜並木が都心のリゾートを思わせる。上質のホテルの珠玉のひととき
</div>
</div>
</div>
<div class="efct" onclick="location.href='pieceosaka';">
<img src="images/art-gallery-4242219_1920.jpg" alt="">
<div class="overlay">
<div class="text">
ピースおおさか...
</div>
<div class="text1">
大阪空襲を語り継ぐ平和ミュージアム。2015(平成27)年4月30日リニュー(...)
</div>
</div>
</div>
</div>
<div class="aaaa1">
<div class="efct" onclick="location.href='osakahall';">
<img src="images/symphony-hall-893342_1920.jpg" alt="">
<div class="overlay">
<div class="text">
大阪城ホール
</div>
<div class="text1">
大阪城築城400年を記念してつくられた、最大16,000人収容の多目的アリー(...)
</div>
</div>
</div>
<div class="efct" onclick="location.href='osakakoen';">
<img src="images/castle-tower-1885563_1920.jpg" alt="">
<div class="overlay">
<div class="text">
大阪城公園
</div>
<div class="text1">
日本の美、日本の四季を実感!
</div>
</div>
</div>
<div class="efct" onclick="location.href='osakapass';">
<img src="images/osaka-castle-2403923_1920.jpg" alt="" class="image">
<div class="overlay">
<div class="text">
大阪周遊パス...
</div>
<div class="text1">
</div>
</div>
</div>
</div>
<div class="aaaa1">
<div class="efct" onclick="location.href='miyaseki';">
<img src="images/osaka-3602269_1920.jpg" alt="">
<div class="overlay">
<div class="text">
難波宮跡公園 ...
</div>
<div class="text1">
飛鳥～奈良時代にかけて、大阪が日本の都であったことを示す前後期の宮殿の跡。
</div>
</div>
</div>
<div class="efct" onclick="location.href='memories';">
<img src="images/148--0d523aa138ce628af4c7b458fb58f981.jpg" alt="">
<div class="overlay">
<div class="text">
楽しい思い出を...
</div>
<div class="text1">
ボランティアガイドが、大阪の魅力を紹介してくれます。
</div>
</div>
</div>
<div class="efct" onclick="location.href='ongakutou';">
<img src="images/concert-731227_1920.jpg" alt="">
<div class="overlay">
<div class="text">
大阪城音楽堂
</div>
<div class="text1">
緑豊かな大阪城公園内にある、約3,000人の収容可能な野外音楽堂。
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer id="serviceNameArea">
<div style="text-align: center;">
Partners
</div>
</footer>
<script>
document.querySelectorAll('input.minibutton1').forEach((element, idx) => {
element.addEventListener('click', (evt) => {
let el = evt.target;
if ( el.className.match('active') ) {
el.classList.remove('active');
} else {
el.classList.add('active');
}
});
});
</script>
</body>
</html>
답변 1
페이지를 직접 보지 않는 이상 답변드리기가 매우 어렵습니다.
하단고정은 position:fixed 를 이용하여 할 수도 있고,
아니면 하단이 중간쯔음 나오는 원인을 찾아서 해결하는 방법도 있습니다.
페이지를 보여드릴 수 있는 방법이 있을까요?
작업하신 사이트 url 을 적어주시면 도움됩니다.
