Я пытаюсь использовать встроенные html-страницы для модуляции версии моей веб-страницы, используя ТОЛЬКО HTML и CSS.Тем не менее, веб-элементы объекта не реагируют на проценты в CSS.Они будут отвечать на vh, но это не относится к содержимому встроенной HTML-страницы.
Я немного поиграл с iframe для того же результата, и я знаю о медиазапросах, но я 'Пока не совсем до этого.
Есть ли способ установить высоту объектов (или эквивалентно внедренные объекты) в процентах, или другой способ установить высоту на основе содержимого встроенной страницы.
Index.html:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="./Styles/Main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="idGeneralLayout">
<header id="idHeaderRow">
<object data="./Universal/Logo.html">
Warning: Header could not be included!
</object>
</header>
<nav id="idNavigationBar">
<object data="./Universal/Navbar.html">
Warning: Navigation Bar could not be included!
</object>
</nav>
<div id="idCenterRow">
<div id="idCenterRowLeft">
<object class="classSectionHeader" data="./Universal/NavigationHeader.html">
Warning: Navigation Header could not be included!
</object>
<object class="classSectionContent" data="./Navigation.html">
Warning: Navigation could not be included!
</object>
</div>
<div id="idCenterRowMain">
<object data="./Content/Content_Index.html">
Warning: Content could not be included!
</object>
</div>
<div id="idCenterRowRight">
<object class="classSectionHeader" data="./Universal/InformationHeader.html">
Warning: Information Header could not be included!
</object>
<object class="classSectionContent" data="./Content/Versions_Index.html">
Warning: Versions could not be included!
</object>
</div>
</div>
<footer id="idFooterRow">
<object data="./Universal/Footer.html">
Warning: Footer could not be included!
</object>
</footer>
</div>
</body>
</html>
Logo.html:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="../Styles/Main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="idInnerLayout">
<img id="idLogo" src="../Pictures/logoHTKB.jpg"><br>
</div>
</body>
</html>
Main.css: (сокращенно)
object
{
width: 100%;
height: auto !important;
overflow: hidden;
border: 0px solid #FE0101;
vertical-align: top;
}
#idGeneralLayout
{
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
background-color: #000000;
border: 0px solid #FE0101;
vertical-align: top;
}
#idInnerLayout
{
width: 100%;
max-width: 100%;
min-height: auto !important;
max-height: 100%;
background-color: #000000;
border: 0px solid #FE0101;
vertical-align: top;
}
#idHeaderRow
{
width: 100%;
max-width: 100%;
height: 44%;
max-height: 44%;
border: 0px solid #FE0101;
vertical-align: top;
}
#idLogo
{
width: 100%;
max-width: 100%;
height: 50%;
max-height: 50%;
border: 0px solid #FE0101;
vertical-align: top;
}