Двухколонный формат с навигацией и контентом, отображающий PDF в контенте без дополнительных полос прокрутки

Я пробовал несколько комбинаций, но еще не нашел одну, которая будет изящно отображаться без добавления ненужных полос прокрутки.

У меня есть страница, которая отображает столбец навигации, а затем столбец содержимого. В столбце содержимого я отображаю PDF в IFrame. Левый столбец зафиксирован, скажем, в 150 пикселей. Мне нужен правый столбец, чтобы использовать всю ширину страницы и всю высоту страницы. По какой-то причине, когда IFrame помещается в правую руку, div увеличивается примерно на 5 пикселей и добавляет дополнительную полосу прокрутки, которая просто портит все. Я могу убрать полосу прокрутки, используя overflow-y: hidden, но это скорее взлом, чем правильная вещь.

Я пробовал это с тегами iframe и object, и поведение такое же.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        html, body
        {
            height: 100%;
            width: 100%;
            padding: 0px;
            margin: 0px;
            background-color:#808080;
        }

        div#nav
        {
            position: absolute;
            height: 100%;
            width: 150px;
            top: 0;
            left: 0;
            background-color:#C0C0C0;
        }

        div#content
        {
            top: 0px;
            height: 100%;
            margin-left: 150px;
            background-color: #2F4F4F;
        }

        iframe#pdf
        {
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
    <div id="nav">
        <fieldset class="lookupFields">
            <div>
                <label for="book" >Book:</label>
                <input type="text" id="book" size="5" />
            </div>
            <div>
                <label for="page">Page:</label>
                <input type="text" id="page" size="5" />
            </div>
            <div>
                <input type="button" id="btnViewImage" value="View" />
            </div>
        </fieldset>
    </div>
    <div id="content">
        <iframe id="pdf" frameborder="0" src="06500001-2.pdf"></iframe>
    </div>
</body>
</html>

Спасибо

дублированный

Источник

1 ответ

Вот FIDDLE на основе вашего кода.

PDF, кажется, подходит очень хорошо, и у меня нет дополнительной полосы прокрутки. Размер страницы в формате PDF изменяется с изменением размера страницы. (Я использую IE11).

Я не сильно изменился в HTML.

HTML

<div id="nav">
  <fieldset class="lookupFields">
    <div>
      <label for="book" >Book:</label>
      <input type="text" id="book" size="5" />
    </div>
    <div>
      <label for="page">Page:</label>
      <input type="text" id="page" size="5" />
    </div>
    <div>
      <input type="button" id="btnViewImage" value="View" />
    </div>
  </fieldset>
</div>
<div id="content">
  <iframe id="pdf" frameborder="0" src="http://www.historytools.org/sources/lincoln-gettysburg.pdf">
  </iframe>
</div>
Источник
Другие вопросы по тегам