Question

当我将浏览器窗口的大小缩小到屏幕的一半时，main_container div的高度会增加，你必须向远处滚动才能进入页脚。

我不希望这种情况发生。我尝试使用max-height但它使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 &copy; 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;
    }

谢谢！

Answer 1

在你的CSS中，你的身高是920px。我觉得div的大小没有增加....只是你的窗口较小，但你的div仍然是920px，所以你必须向下滚动才能看到整个div区域。

如果您希望div区域在窗口中保持完全可见，您可以试试这个。

而不是将高度固定为920px。删除。使div高度为100％。然后将您的上边距和下边距设置为合理的数字，例如3em，以便它可以舒适地放在窗口区域。如果将它们设置为固定大小，则可能必须对左侧和右侧执行相同的操作。

如果窗口缩小得太小，您可能还想将div设置为最小高度，这样它就不会看起来很时髦。

不确定这是否是您尝试实现的目标，但我希望这会有所帮助。

浏览器窗口收缩时，Div高度增加

1 个答案: