footer 하단 고정 질문입니다

footer 하단 고정 질문입니다

QA

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 를 이용하여 할 수도 있고,

아니면 하단이 중간쯔음 나오는 원인을 찾아서 해결하는 방법도 있습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 123,127 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT