2
현재 작업하고있는 웹 사이트에 대해 부트 스트랩과 함께 MVC 4를 사용하고 있습니다. 오히려 단순한 레이아웃, 상단 (navbar-fixed-top)에 머물러있는 부트 스트랩 탐색 막대가 있습니다. 그런 다음 페이지 제목, 절대 위치 및 높이를 가진 div를 메뉴 바로 아래에 두었습니다.PDF가 포함 된 iFrame의 레이아웃 문제
다음 페이지 내용에 대해 페이지 제목 바로 아래에서 시작하는 상위 세트가있는 절대 위치가있는 div가 다시 있습니다. 본문의 오버플로가 none으로 설정되고 페이지 내용이 자동으로 설정됩니다.
body, html
{
height: 100%;
overflow: hidden;
}
.PageTitle
{
position: absolute;
top: 40px;
left: 0;
right: 0;
height: 60px;
color: #fdf4f4;
background-color: #4266cd;
border-color: #bce8f1;
}
.Content
{
overflow: auto;
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 0;
}
이 다른 페이지에 대한 잘 작동하지만 나는 매달 전단지 (PDF)을 표시해야하고 컨텐츠 영역을 작성하고 사용자가 스크롤 할 수 있도록합니다. 문제는 물론 100 % 높이로 iFrame을 추가하면 내용 div (상위)의 높이가 브라우저 창 높이가됩니다. 높이를 100 % ~ 100px로 설정한다고 말할 수 있다면 아주 멋지다.
jQuery를 사용하여 크기를 변경하려고 시도했지만 성공하지 못했습니다.
누구든지 길을 따라 도울 수있는 아이디어가 있습니까?
감사합니다.
업데이트 : 나는 Akshay Khandelwal의 글을 읽었으며, 무엇을 하려는지 기본으로 간단한 HTML 페이지를 만들었습니다. 이전에 가지고 있던 문제를 재현하는 과정에서 해결책을 찾았을 수도 있습니다. 코드가 작동하는 것처럼 보입니다. 이것이 좋은 방법인지 아닌지 확실하지 않습니다.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PDF View Test</title>
<style>
body
{
margin: 0;
overflow: hidden;
}
.NavBarTop
{
position: fixed;
top: 0;
left: 0;
right: 0;
height: 40px;
margin-bottom: 0;
background: #778899;
}
.PageTitle
{
position: absolute;
top: 40px;
left: 0;
right: 0;
height: 60px;
color: #fdf4f4;
background-color: #4266cd;
border-color: #bce8f1;
}
.Content
{
overflow: hidden;
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 0;
}
h3
{
color: rgb(253, 244, 244);
display: block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 25px;
font-weight: bold;
height: 40px;
line-height: 40px;
margin-bottom: 10px;
margin-left: 0;
margin-right: 0;
margin-top: 10px;
text-align: center;
}
h4
{
color: rgb(253, 244, 244);
display: block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: bold;
height: 20px;
line-height: 20px;
margin-bottom: 5px;
margin-left: 0;
margin-right: 0;
margin-top: 10px;
text-align: center;
}
iframe
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="NavBarTop">
<h4>This is the menu bar.</h4>
</div>
<div class="PageTitle">
<h3>The Page Title</h3>
</div>
<div class="Content">
<iframe src="http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/products/content-server/pdfs/adobe-ebook-platform-whitepaper.pdf"/>
</div>
</body>
</html>
내가 뭘하려고하는지 보여주는 샘플 HTML 페이지로 텍스트를 업데이트했습니다. 이러한 변경 사항을 프로젝트에 적용하고 이것이 작동하는지 확인하겠습니다. –
글쎄, 내 주요 프로젝트에서 그것을 시도하고 효과. 나는 content div의 오버 플로우를 숨기도록 설정해야했다. 그렇지 않으면 스크롤바가 표시 될 것이다. –