谁能帮我解决我的 CSS 问题。我想要做的是在没有内部窗口滚动条的情况下立即在屏幕上显示整个文档。 下面是代码，我在 plunker 上开了一个协作室。谢谢
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title></title>
<link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<nav>
<ul>
<a href = ""><li>Test Links will go here</li></a>
</ul>
</nav>
<main>
<div id = "content">
<article>
<p><iframe style="width: 100%; min-height: 100vh; background-color: #f2f0ea; border: none;"
src="https://docs.google.com/document/d/1L3-ogIreQhm-aHutOfKjDI17buwCJRrkzmwvQGMafGw/pub?embedded=true"
width="300" height="150">
</iframe>
</p>
</article>
</div>
</main>
</body>
</html>
CSS
/* Styles go here */
html {
background : url("http://universitychessclub.org/ChessBackground.jpg") no-repeat center center fixed;
background-size : cover;
}
#welcome{
font-family: monospace;
text-align: center;
}
h1{
font-family: 'Fira Sans', sans-serif;
}
h2{
font-family: 'Fira Sans', sans-serif;
}
p{
font-family: 'Fira Sans', sans-serif;
}
body{
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
width: 80%;
height: 100%;
}
header h1{
margin-left:23%;
font-size:350%;
color: #f2f0ea;/* --off- yellow-white-- */
margin-bottom:5px;
font-family: 'Voltaire', sans-serif;
}
header h2{
margin-left:55%;
width:50%;
margin-top:0%;
color: #f2f0ea;/* --off- yellow-white-- */
font-family: 'Voltaire', sans-serif;
}
header h1 b img {
height:17%;
width:17%;
margin-bottom:-7%;
}
/*--Nav Section--*/
a:hover, a:active {
background-color: #1b1b1b;/*-light black-*/
opacity: 0.4;
}
nav {
background-color: #1b1b1b;/*-light black-*/
width: 100%;
padding:.002%;
border-radius:5px;
opacity: 0.9;
}
nav li {
display: inline;
}
nav ul a {
color: white;
margin: 1%;
text-decoration:none;
font-size:115%;
}
/* --footer section-- */
footer{
color:white;
font-size:larger;
font-style:italic;
text-align: center;
}
input, textarea{
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
.submit{
width: 40%;
margin-left: auto;
margin-right: auto;
}
/* --content area-- */
#content{
height: 100%;
min-height: 100vh;
color:#1b1b1b; /*-light black-*/
font-size: 1.1em;
background-color:#ffffff;/* --off- yellow-white-- */
padding:1%;
border-radius:5px;
}
/* --table-- */
table {
text-align:center;
border-collapse: collapse;
border-style: outset;
border-width:5px;
border-style: solid;
border-color:#1b1b1b; /*-light black-*/
background-color: #f2f0ea;/* --off- yellow-white-- */
}
table a:link{
text-decoration: none;
background-color:transparent;
}
td {
border-width:3px;
border-style: solid;
border-color:#1b1b1b; /*-light black-*/
color: #1b1b1b; /*-light black-*/
}
#tablerow1{
background-color:#898989/*-grey-*/
}
/* --unvisited link-- */
p a:link {
/*-light black-*/
text-decoration: none;
background-color:transparent;
}
/* --visited link-- */
p a:visited {
/* light black */
text-decoration: none;
background-color:transparent;
}
/* --mouse over link-- */
p a:hover {
text-decoration: none;
}
/*--Media Queries--*/
/*--Phone--*/
@media screen and (max-width: 600px) {
header img {display: none; }
header h1{margin-left:0px;}
header h2{padding-left:0px;}
nav{margin-left:0px;}
}
/*--Tablet--*/
@media screen and (max-width: 1024px) {
header h1{margin-left:0px;}
nav{margin-left:0px;}
}
#show{
text-align: center;
}
/*SET MAX SIZES FOR IMAGES*/
img{
max-width: 100%;
max-height: 100%;
}
table img{
max-width: none;
max-height: none;
}
最佳答案
使用关注
html, body { height: 100%; }
iframe {
height:400%;
width:100%;
}关于html - 你能解决我的 iframe 高度问题吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35330487/