아이프레임에 스티키 메뉴 적용하기

아이프레임에 스티키 메뉴 적용하기

QA

아이프레임에 스티키 메뉴 적용하기

본문

안녕하세요

레이아웃은 html이고(그누보드 테마 아님) nav에 sticky를 사용한 레이아웃을 쓰고 있습니다

html 파일 안에 내용을 쓰면 스티키 메뉴가 잘 됩니다


하지만 main에서 그누보드를 아이프레임으로 불러오면, 아이프레임안에서만 스크롤이 됩니다. 스티키 메뉴가 아니라 그냥 평범한 메뉴에 아이프레임을 쓴 것처럼 돼버려요

보통 홈페이지나 블로그처럼 내용에 따라서 스크롤이 주욱 됐으면 좋겠어요. 스티키 메뉴가 활성화되게요.

 

방법 아시는 분 부탁드립니다(__)

 


<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
    <header>
        header
    </header>
    <nav>
        nav
    </nav>
    <div class="main">
<iframe src="http://naver.com" style="width:100%; height:100%; border:none"></iframe>
    </div>
    <footer>
    </footer>
</body>
</html>

 


body, html {
            margin: 0;
            padding: 0;
display: flex;
  flex-direction: column;
height: 100vh;
        }
        header {
            line-height: 100px;
            text-align: center;
        }
        nav {
            background: #0af;
            top: 0;
            position: sticky;
            line-height: 30px;
            text-align: center;
        }
        .main {
            background: #1a1;
height: auto;
            text-align: center;
flex: 1 1 auto;
justify-content: center;
        }
        footer {
            background: #834;
            text-align: center;
        }

이 질문에 댓글 쓰기 :

답변 2

관련 내용으로 스택오버플로우에 답변이 있네요.

한번 해보세용.

 

https://www.google.com/search?q=iframe+sticky&oq=iframe+sti&aqs=chrome.1.69i57j0j0i30l3.4151j0j7&client=ms-android-lge-rvo3&sourceid=chrome-mobile&ie=UTF-8

 

https://github.com/PierBover/ios-iframe-fix

 

sticky가 iframe안에서 먹을 까요?  css sticky는 브라우저의 탑부분을 찾아서 붙여주는 것인데

 

그래서 일부 브라우저별로 동작이 조금씩 다른 경우가 생깁니다.

 

아마도 iframe안에서 붙여줄려고 하면 javascript로 별도로 만들어 주어야 될 것입니다.

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

회원로그인

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