아이프레임에 스티키 메뉴 적용하기 채택완료
Winter0
4년 전
조회 3,516
안녕하세요
레이아웃은 html이고(그누보드 테마 아님) nav에 sticky를 사용한 레이아웃을 쓰고 있습니다
html 파일 안에 내용을 쓰면 스티키 메뉴가 잘 됩니다
하지만 main에서 그누보드를 아이프레임으로 불러오면, 아이프레임안에서만 스크롤이 됩니다. 스티키 메뉴가 아니라 그냥 평범한 메뉴에 아이프레임을 쓴 것처럼 돼버려요
보통 홈페이지나 블로그처럼 내용에 따라서 스크롤이 주욱 됐으면 좋겠어요. 스티키 메뉴가 활성화되게요.
방법 아시는 분 부탁드립니다(__)
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
답변에 대한 댓글 3개
W
Winter0
4년 전
W
Winter0
4년 전
html, body {
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;
}
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;
}
W
Winter0
4년 전
댓글에 코드 올립니다. 봐주시면 감사합니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
<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>