2
當我將瀏覽器窗口的大小縮小到屏幕的一半時，main_container div的高度增加，並且您必須向遠處滾動才能到達頁腳。當瀏覽器窗口縮小時Div高度增加
我不希望發生這種情況。我嘗試使用最大高度，但它使div消失。
任何人都可以幫助我嗎？由於
HTML代碼：
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<link href="css/stylesheet.css" type="text/css" rel="stylesheet" />
<title>Aduro Pictures</title>
</head>
<body>
<header>
<div id="logo_home">
<a href="index.html" title="Home"><img id="logo" src="images/logo.jpg" alt="logo"></a>
</div>
<nav>
<ul>
<li><a class="nav_link" id="about" href="about.html" title="About">About</a></li>
<li><a class="nav_link" id="short_films" href="short_films.html" title="Short Films">Short Films</a></li>
<li><a class="nav_link" id="cast_crew" href="cast_crew.html" title="Cast/Crew">Cast/Crew</a></li>
<li><a class="nav_link" id="gallery" href="gallery.html" title="Gallery">Gallery</a></li>
<li><a class="nav_link" id="links" href="links.html" title="Links">Links</a></li>
<li><a class="nav_link" id="contact_us" href="contact_us.html" title="Contact Us">Contact Us</a></li>
</ul>
</nav>
</header>
<div id="main_wrapper">
<div id="video_container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/EuIXJIp8f6U" frameborder="0" allowfullscreen></iframe>
</div>
<div id="image_container">
<div id="gradient"></div>
</div>
<div id="main_container"></div>
</div>
<footer>
<p class="copyright">Copyright © 2016.</p>
</footer>
</body>
</html>
CSS代碼：
body {
margin: 0px;
font-size: 62.5%;
padding: 0px;
}
header {
width: 100%;
height: 90px;
background-color: #000000;
}
#logo_home {
position: relative;
float: left;
left: 5%;
width: 20%;
top: 7.5px;
}
#logo {
height: 75px;
width: 300px;
}
nav {
position: relative;
float: right;
right: 5%;
width: 35%;
height: 50px;
top: 20px;
}
ul {
margin-top: 0px;
margin-bottom: 0px;
position: relative;
top: 17.5px;
}
li {
display: inline-block;
margin-left: 2.5%;
margin-right: 2.5%;
position: relative;
list-style-type: none;
padding-top: 0px;
}
.nav_link {
font-family: 'PT-Sans', sans-serif;
color: #FFFFFF;
font-size: 1.2em;
text-transform: uppercase;
text-decoration: none;
}
.nav_link:link {
color: #ffffff;
}
.nav_link:visited {
color: #ffffff;
}
.nav_link:hover {
color: #dddddd;
}
#main_wrapper {
height: 1500px;
width: 100%;
}
#video_container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
z-index: 5;
}
#video_container iframe, #video_container object, #video_container embed {
position: absolute;
top: 100px;
left: 17.5%;
width: 65%;
height: 65%;
box-sizing: border-box;
}
#image_container {
position: absolute;
top: 90px;
left: 0px;
width: 100%;
height: 580px; /*pic ain't 580px in height*/
background: url('../images/background5.jpg') no-repeat;
}
#gradient {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 580px;
background: transparent linear-gradient(to bottom, rgba(29, 29, 29, 0.65) 0px, #1D1D1D 100%) repeat scroll 0% 0%;
}
#main_container {
background-color: #1d1d1d;
background-repeat: no-repeat;
height: 920px;
position: absolute;
width: 100%;
top: 670px;
}
footer {
background-color: #000000;
height: 50px;
width: 100%;
margin: 0px;
top: 0px;
position: relative;
}
.copyright {
color: white;
font-family: 'PT-Sans', sans-serif;
font-size: 1.2em;
position: relative;
text-align: center;
top: 15px;
margin: 0px;
padding: 0px;
}
謝謝！