Я создаю адаптивный сайт.У меня есть основной iFrame для настраиваемого контента и боковая панель, на которой будут отображаться новости от нашей компании.
Я хочу, чтобы сайт работал на всех экранах ноутбуков, ПК / MAC и планшетов.Большинство элементов растягиваются и отзывчивы, включая navBar, верхний и нижний колонтитулы, но не высоту iFrame.
Я пытался использовать (vh) для высоты, но, похоже, не работает.
HTML и CSS прилагается:
body { /* General Body Properties */
font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
margin: 0;
overflow: hidden;
}
* { /* Key element to aligning <divs> (DO NOT REMOVE) */
box-sizing: border-box;
}
.header { /* Header properties featuring myEd and school emblems */
padding: 30px;
text-align: center; /* Aligns links in the navBar */
background-image: url(/Home/Welcome/Img/backgroundHeader-4K.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.myEd-reverse {
width: 240px;
height: 70px;
float: left;
margin-left: -60px;
margin-top: -40px;
}
.navBar { /* Sticky navBar, either relative or fixed, depending on the scroll position of the site */
overflow: hidden;
background-color: #333;
position: sticky;
position: -webkit-sticky;
top: 0;
}
.navBar a { /* Style the navBar links */
float: left;
display: block;
color: #fff;
text-align: center;
padding: 8px 16px;
text-decoration: none;
}
.navBar a.right { /* Float Quick Links, Help and Log-out navBar directory items to the right of the navBar */
float: right;
}
.navBar a:hover { /* Change color on hover */
background-color: #ddd;
color: #000;
}
.navBar a.active { /* Active Link */
background-color: #666;
color: #fff;
}
.row { /* Alignment between sideBar and main */
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.sideBar { /* sideBar alignment properties */
-ms-flex: 20%;
flex: 20%;
background-color: #a7a7a7;
padding: 0px;
height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */
}
.profilePanel { /* Panel properties */
background-color: #585858;
width: 100%;
padding: 0px;
}
#newsmyEd {
width: 100%;
height: 67.6vh;
}
.main { /* Main Column */
-ms-flex: 80%;
flex: 80%;
background-color: #a7a7a7;
padding: 0px;
height: 5000px; /* As standard to work on all screen resolutions, overflow hides excess */
}
.frameMain { /* Frame Properties */
position: relative;
left: 0;
width: 100%;
height: 83vh;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 15px;
background-color: #333;
}
@media screen and (max-width: 700px) { /* Responsive Layout - If screen px is less than 700px, make sideBar and main stack on top of each other */
.row {
flex-direction: column;
}
}
@media screen and (max-width: 400px) { /* Responsive Layout - If screen px is less than 400px, make navBar links stack vertically on top of each other */
.navBar a {
float: none;
width: 100%;
}
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Welcome | myEd</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/Home/Welcome/Style/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" href="/Home/Welcome/Img/faviconmyEd-16x16.png">
</head>
<body>
<div class="header"> <!-- Header featuring 4K Background, myEd and school emblems -->
<img src="/Home/Welcome/Img/myEd-reverse.png" class="myEd-reverse" alt="myEd" title="myEd Software"> <!-- myEd Software -->
</div>
<div class="navBar"> <!-- Main sticky navBar with categories listed -->
<a href="#" class="active" title="Home Workspace"><i class="fa fa-home"></i></a> <!-- Home -->
<a href="#" title="Learning Workspace"><i class="fa fa-book"></i></a> <!-- Learning -->
<a href="#" title="Student Management Workspace"><i class="fa fa-user"></i></a> <!-- Student Management -->
<a href="#" title="Portal Workspace"><i class="fa fa-globe"></i></a> <!-- Portals -->
<a href="#" class="right" title="Log-out"><i class="fa fa-sign-out"></i></a> <!-- Log-out (right to left) -->
<a href="#" class="right" title="Help"><i class="fa fa-question-circle"></i></a> <!-- Help (right to left) -->
<a href="#" class="right" title="Quick Links"><i class="fa fa-bookmark"></i></a> <!-- Quick Links (right to left) -->
</div>
<div class="row"> <!-- Format for alignment of the sideBar and main panels -->
<div class="main"> <!-- Main learning or collaborative workspace -->
<iframe class="frameMain" scrolling="yes" frameborder="0" src=""></iframe> <!-- Embedded frame -->
</div>
<div class="sideBar"> <!-- sideBar featuring Profile, myEd News and directory -->
<div class="profilePanel" style="height: 100px"></div> <!-- Dark grey panel where student info iFrame will lay -->
<iframe id="newsmyEd" frameborder="0" src="/News/index.html"></iframe> <!-- myEd News -->
</div>
</div>
<div class="footer"> <!-- Featuring Copyright (c) notice and privacy policy -->
</div>
</body>
</html>
Я только начинаю в области HTML и CSS.Как получить iFrame для настройки высоты iFrame на всех разрешениях экрана.
Спасибо за вашу помощь.Том