아이프레임에 스티키 메뉴 적용하기
본문
안녕하세요
레이아웃은 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
sticky가 iframe안에서 먹을 까요? css sticky는 브라우저의 탑부분을 찾아서 붙여주는 것인데
그래서 일부 브라우저별로 동작이 조금씩 다른 경우가 생깁니다.
아마도 iframe안에서 붙여줄려고 하면 javascript로 별도로 만들어 주어야 될 것입니다.
답변을 작성하시기 전에 로그인 해주세요.