У меня есть следующий сценарий: -
На html-странице отобразите верхнюю панель, а затем еще одну html-страницу, динамически добавленную в нижнюю часть страницы (для которой я использовал Iframe). Таким образом, полосы прокрутки для окна как таковые не должны появляться. Вместо этого должна появиться полоса прокрутки для включенной страницы. Я мог бы сделать это, используя свойство overflow: hidden в теле страницы.
Но теперь, чтобы добиться этого, мне пришлось установить высоту iframe на 100%, чтобы страница выглядела без шва. Проблема в том, что нижний div, который содержит iframe, вытекает из <body> родительского элемента, и поскольку я дал overflow:hidden телу, он обрезает последний бит каждой включенной страницы. Как мне это преодолеть?
Код: -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Show Asset</title>
<style>
html, body, iframe
{
height: 100%;
}
body
{
overflow: hidden;
margin: 0px;
}
iframe
{
width: 100%;
margin: 0px;
border: 0px;
padding: 0px;
}
.optionsBar
{
background-color: Lime;
}
.iframeHolder
{
/* height: 100%;*/
}
</style>
</head>
<body>
<div class="optionsBar">Test</div>
<div class="iframeHolder">
<iframe frameborder="0" scrolling="auto" src="http://en.wikipedia.org/wiki/Main_Page"></iframe>
</div>
</body>
</html>