个人中心
gpt4 book ai didi

html - 所有屏幕尺寸的响应式 iFrame 高度

转载 作者：行者123 更新时间：2023-11-28 00:53:16 25 4
gpt4 key购买 nike

在我的代码中，我有两个具有响应宽度的 iFrame。我怎样才能让两个 iFrame 都像我在代码中那样设置高度，但高度要根据屏幕尺寸进行相应调整。例如，高度现在非常适合 12 英寸的 MacBook。我希望 iFrame 调整所有屏幕分辨率的高度，但 iFrame 高度停止在页脚之前，iFrame 中的多余内容可以滚动。

代码:

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;
}

#wrapper {
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0
}

.header {
  /* Header properties featuring myEd and school emblems */
  padding: 30px;
  text-align: center;
  /* Aligns links in the navBar */
  background-image: url(/Default/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: 6px 12px;
  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 */
  overflow-y: scroll;
  /* Allows myEd news to scroll */
  overflow: hidden;
}

.profilePanel {
  /* Panel properties */
  background-color: #585858;
  width: 100%;
  padding: 0px;
}

#newsmyEd {
  width: 100%;
  height: 9.4%;
  top: 0;
  right: 0;
}

.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 */
  overflow-y: scroll;
  /* Allows embedded iFrame to scroll */
  position: relative;
  overflow: hidden;
}

.frameMain {
  /* Frame Properties */
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
}

.footer {
  /* Footer properties */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #333;
}

.footer a {
  /* Footer navBar properties */
  float: right;
  display: block;
  color: #fff;
  text-align: center;
  padding: 6px 12px;
  text-decoration: none;
}

.footer a:hover {
  /* Change color on hover */
  background-color: #ddd;
  color: #000;
}

.footer a.active {
  /* Active Link */
  background-color: #666;
  color: #fff;
}

@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://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
  <link rel="shortcut icon" href="/Default/Img/faviconmyEd-16x16.png">
</head>

<body>
  <script>
    // Required scripts for certain activities on myEd, each entry will be noted for understanding
  </script>
  <div id="wrapper">
    <!-- Wrapper fitting website to all screen resolutions -->
    <div class="header">
      <!-- Header featuring 4K Background, myEd and school emblems -->
      <img src="/Default/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="fas fa-sign-out-alt"></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" width="100%" height="11.4%" scrolling="yes" src="/Home/Welcome/iFrame/index.html"></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="/Default/News/index.html"></iframe>
        <!-- myEd News -->
      </div>
    </div>
    <div class="footer">
      <!-- Featuring Site Navigation and myEd News navBar links -->
      <a href="#" class="active" title="myEd News"><i class="far fa-newspaper"></i></a>
      <!-- myEd News -->
      <a href="/Home/Welcome/siteNavigation/index.html" title="Site Navigation"><i class="fa fa-location-arrow"></i></a>
      <!-- Site Navigation -->
    </div>
  </div>
</body>

</html>

感谢您的帮助。汤姆

最佳答案

尝试对两个 iframe 使用 min-height:some_value ;

关于html - 所有屏幕尺寸的响应式 iFrame 高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53112693/

25 4 0
文章推荐： javascript - AngularJS 的 ngSanitize 应该修复标签吗？
文章推荐： javascript - EmberJS - 在模板填充数据之前 promise 未解决
文章推荐： javascript - 使用 Promise Angularjs 在 Controller 之间传递数据
文章推荐： javascript - CasperJS中的waitTimeout和stepTimeout有什么区别？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com