两个iFrame之间的大空间(HTML/CSS)

polkgigr 于 2023-08-08 发布在其他

关注(0)|答案(2)|浏览(110)

所以我有这个简单的website called Quest Talk（questtalk.neocities.org）
在Google Form和Substack Form之间有一个奇怪的用户不友好的空间。但是，它仅在桌面浏览器应用程序上可见，而在移动的浏览器应用程序上不可见。没有特定的CSS设置。（见下面的CSS代码）

**我的问题：**我如何确保空间尽可能有效地使用，并且两个框架之间没有如此巨大的差距？
我的编码：

body {
  background-color: #D6FFC7;
  color: #1B3B3A;
  margin-left: 0;
  margin-right: 0;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.2em;
  text-align: center;
  padding-bottom: 12vh;
  line-height: 1.8;
}

header {
  position: fixed;
  width: 100%;
  background-color: #D6FFC7;
  margin-left: 0;
  color: #1B3B3A;
  font-weight: bold;
  /* padding: 1rem; */
  text-align: center;
  /* margin-bottom: 2rem; /* Add margin */
}

header h2 {
  margin-top: 0;
}

#language-container {
  background-color: #D6FFC7;
  color: #1B3B3A;
  font-family: 'Courier New', Courier, monospace;
  text-align: center;
  margin-left: 0;
  font-style: italic;
  /* padding: 1rem; */
}

#question-container {
  background-color: #1B3B3A;
  color: white;
  /* font-weight: bold; */
  font-size: calc(2.0*(0.75vh + 0.8vw));
  /* padding: 2rem; */
  text-align: center;
  margin-left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 50vh;
}

#refresh-btn {
  background-color: #1B3B3A;
  color: white;
  margin-left: 0;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  border: none;
  font-family: 'Courier New', Courier, monospace;
}

/* .arrow {
  font-size: 2em;
  margin-top: 20px;
  text-align: center;
} */

#about-container {
  background-color: #D6FFC7;
  color: #1B3B3A;
  /* padding: 1rem; Add padding */
}

#legal-container {
  background-color: #D6FFC7;
  color: #1B3B3A;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #D6FFC7;
  margin-left: 0;
  color: #1B3B3A;
  font-style: italic;
  /* padding: 1rem; */
  text-align: center;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
}

p {
  margin: 1rem 0;
  line-height: 1.5;
}

hr {
  border: none;
  border-top: 2vh solid #1B3B3A;
  height: 1vh;
  margin: 0;
}

a {
  color: #1B3B3A;
  /* This sets the color of unvisited links */
}

a:visited {
  color: #1B3B3A;
  /* This sets the color of visited links */
}

a:hover {
  color: #1B3B3A;
  /* This sets the color of links when the mouse is over them */
}

a:active {
  color: #1B3B3A;
  /* This sets the color of links when they are clicked */
}

个字符
我使用了<br>和<p>，但在桌面浏览器上没有任何区别。

css

来源：https://stackoverflow.com/questions/76854481/large-space-between-two-iframes-html-css

2条答案

按热度按时间

jv4diomz1#

试试这个：

body {
     background-color: #D6FFC7;
     color: #1B3B3A;
     margin-left: 0;
     margin-right: 0;
   font-family: 'Courier New', Courier, monospace;
  font-size: 1.2em;
  text-align: center;
  padding-bottom: 12vh;
  line-height: 1.8;
}

header {
  position: fixed;
  width: 100%;
  background-color: #D6FFC7;
  margin-left: 0;
  color: #1B3B3A;
  font-weight: bold;
  /* padding: 1rem; */
  text-align: center;
  
  /* margin-bottom: 2rem; /* Add margin */
}

header h2 {
  margin-top: 0;
}

#language-container {
  background-color: #D6FFC7;
  color: #1B3B3A;
  font-family: 'Courier New', Courier, monospace;
  text-align: center;
  margin-left: 0;
  font-style: italic;
  /* padding: 1rem; */
  }

#question-container {
background-color: #1B3B3A ;
color: white;
/* font-weight: bold; */
font-size : calc(2.0*(0.75vh + 0.8vw)) ;
/* padding: 2rem; */
text-align: center;
margin-left: 0;
display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 50vh;
}

#refresh-btn {
  background-color: #1B3B3A ;
  color: white ;
  margin-left: 0;
  font-size: 1em ;
  font-weight: bold;
  cursor: pointer ;
  border:none;
  font-family: 'Courier New', Courier, monospace;
}

/* .arrow {
  font-size: 2em;
  margin-top: 20px;
  text-align: center;
} */

 #about-container {
   background-color: #D6FFC7;
   color: #1B3B3A;
/* padding: 1rem; Add padding */
} 

#legal-container {
  background-color: #D6FFC7;
  color: #1B3B3A;
  }

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #D6FFC7;
  margin-left: 0;
  color: #1B3B3A;
  font-style: italic;
  /* padding: 1rem; */
  text-align: center;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}

p {
  margin: 1rem 0;
  line-height: 1.5;
}

hr {
  border: none;
  border-top: 2vh solid #1B3B3A;
  height: 1vh;
  margin: 0;
}

a {
  color: #1B3B3A; /* This sets the color of unvisited links */
}

a:visited {
  color: #1B3B3A; /* This sets the color of visited links */
}

a:hover {
  color: #1B3B3A; /* This sets the color of links when the mouse is over them */
}

a:active {
  color: #1B3B3A; /* This sets the color of links when they are clicked */
}

个字符

说明：

简单地说，第一个iframeheight被设置为790，这比表格需要的要多，因此第一个iframe在下侧扩展所产生差距。
我只是把高度改成了600，这样它就需要尽可能多的空间了。

赞(0）回复(0）举报 2023-08-08

odopli942#

问题在于上面的iframe的height设置为790，并且该值远远超过了内部HTML文档的大小。例如，如果将高度设置为630，则空间将小得多。
纯粹使用CSS无法根据iframe内容的高度设置高度，唯一的解决方案是通过使用myIframe.contentDocument访问内容来使用JavaScript获取内容高度，但是您的iframe是跨域的，所以这不起作用。另一种解决方案是使用postMessage()，但您无法控制iframe的内容。
因此，现在您需要使用绝对高度。

赞(0）回复(0）举报 2023-08-08

我来回答

两个iFrame之间的大空间(HTML/CSS)

2条答案

相关问题

热门标签

最新问答