thank you for reading my question.
i need your understanding about best regards.
i am making a top navigation using css tag, but the height of the panorama does not change to 100% as shown below. Is there any problem?
it will be greatful if u can give any advice
HTML
<!DOCTYPE html><html><head> <title>krpano Javascript API Examples</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" /> <style>
*{margin:0; padding: 0; box-sizing: border-box;}
li{list-style: none;}
a{text-decoration: none;}
/*header*/
h1, .navi_icon{position: absolute;}
h1{font-size: 18px; left:10px; top: 0px;}
.navi_icon{right: 10px; top: 20px; color: #fff; font-size: 24px; cursor: pointer;}
.top_navi {background-color: #ff0084; overflow: hidden; text-align: center;}
.top_navi li{float: left; width: 25%; padding:10px 0;}
.top_navi a{color:#fff;}
.bottom_navi {overflow: hidden; text-align: center; height: 40px; line-height: 40px;
background:#33cc;}
.bottom_navi li{float: left; width: 20%; padding:10px 0; position: relative;}
.bottom_navi a{color:#000; font-size: 14px;}
.bottom_navi li:before{content: ''; position: absolute; width: 1px; left: 0; top: 14px; bottom: 14px; background-color: #333;}
.bottom_navi li:first-child:before{display: none;}
/* .pano{position: absolute; overflow: hidden;} */
/* @-ms-viewport { width:device-width; } */
/* @media only screen and (min-device-width:800px) { html { overflow:hidden; } } */
/* html { height:100%; } */
/* body { height:100%; } */
header{ position: relative; background-color: blue;}
#pano{ position: absolute; width: 100%; height: 100%; }
</style>
</head>
<body>
<header>
<nav>
<ul class="top_navi">
<li onclick="loadpano('pano2.xml');"><a href="#">Top_Menu</a></li>
<li><a href="#">Top_Menu</a></li>
<li><a href="#">Top_Menu</a></li>
<li><a href="#">Top_Menu</a></li>
</ul>
<ul class="bottom_navi">
<li><a href="#">Bottom Menu</a></li>
<li><a href="#">Bottom Menu</a></li>
<li><a href="#">Bottom Menu</a></li>
<li><a href="#">Bottom Menu</a></li>
<li><a href="#">Bottom Menu</a></li>
</ul>
</nav>
<div id="pano" class="pano"></div>
</header>
<script src="../../../krpano.js"></script>
<script>
// global krpano interface (will be set in the onready callback)
var krpano = null;
// embed the krpano viewer into the 'pano' div element
embedpano({
swf : "../../../krpano.swf", // path to flash viewer (use null if no flash fallback will be requiered)
id : "krpanoSWFObject",
xml : "pano1.xml",
target : "pano",
consolelog : true, // trace krpano messages also to the browser console
passQueryParameters : true, // pass query parameters of the url to krpano
onready : krpano_onready_callback
});
// callback function that will be called when krpano is embedded and ready for using
function krpano_onready_callback(krpano_interface)
{
krpano = krpano_interface;
}
function loadpano(xmlname)
{
if (krpano)
{
krpano.call("loadpano(" + xmlname + ", null, MERGE, BLEND(0.5));");
} }</script></body>
</html>
Alles anzeigen
my pool english
best regards