Question

我正在创建一个响应式网站。我有一个用于自定义内容的主iFrame和一个显示我们公司新闻的sideBar。

我希望该网站可以在所有笔记本电脑，PC / 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高度。

感谢您的帮助。汤姆

Answer 1

不太确定这是否是您要实现的目标，但是我刚刚进行了更改 height到#newsmyEd的{{1}}值和100%的{{1}}的值，希望对您有所帮助：

overflow-y: scroll;

.sideBar

如何将iFrame高度拉伸到所有屏幕尺寸

1 个答案: