如何让主 div 填充尽可能多的垂直空间答案

【问题标题】：How to get the main div to fill as much vertical space as possible如何让主 div 填充尽可能多的垂直空间
【发布时间】：2026-01-05 07:40:01
【问题描述】：

我有一个摄影网站项目。我还很新，所以仍在为一些基础知识而苦苦挣扎。我的项目将有一个页眉、一个显示照片的主 div 和一个页脚。我希望我的主 div 用底部的页脚填充尽可能多的空间（如您所料）。但这就是我得到的：

我暂时将页眉和页脚的背景颜色设置为黄色，主 div 的颜色设置为红色，主体设置为绿色。这是为了更好地解决问题。我想要的不是绿色，页脚位于底部，其余部分为红色，无论窗口大小。这是我的代码：

<!DOCTYPE html>
<html lang="en-US">
    <head>    
        <meta charset="UTF-8">    
        <title>Photography</title>    
        <link rel="stylesheet" type="text/css" href="styles.css">    
        <script type="text/javascript" src="JavaScript2b.js"></script>
        <script type="text/javascript" src="JavaScript2.js"></script>
        <script type="text/javascript" src="jquery-3.1.0.min.js"></script>

    </head>
    <body>    
    <div id="header">
    </div>    
        <div id="wrap">   
            <div id="container">
                <div id="controllers">
                    <div id="previous" class="buttons">
                        <p id="try" onclick="change(-1);">PREVIOUS</p>
                    </div>
                    <div id="next" class="buttons">
                        <p id="try2" onclick="change(1);">NEXT</p>
                    </div>   
                </div>  
                <div id="imagewrap">
                    <img src="Images/01PARANA/Image1.jpg" height="100%" id="front" />
                </div>    
                <div>
                    <p id="tag">Text</p>
                </div>    
            </div>   
        </div>   
    <div id="footer">
    </div> 
        <script type="text/javascript" src="JavaScript2.js"></script>    
    </body>

    </html>

css

@font-face {font-family: Eagle-Light;
                    src: url("Eagle-Light.otf") format("opentype");
                    }

@font-face {font-family: Raleway Light;
                    src: url("Raleway Light.otf") format("opentype");
                    }

body {
/*  height: 100%;*/
    background-color: green;
}

#header {
    height: 100px;
    width: 100%;
    background-color: yellow;
}
#footer {
    height: 100px;
    width: 100%;
    background-color: yellow;
}

p {
    color: #818181;
    font-family: Eagle-Light;
    line-height: 1.7em;
    padding: 0px;
    margin: 0px;
    font-size: 0.5em;
    letter-spacing: 0.21em;
}


a:link {
    text-decoration: none;
    color: inherit;
}

a:visited {
    text-decoration: none;
    color: inherit;
}

div {
    margin: 0px;
    padding: 0px;
}

#wrap {
    clear: both;

    padding: 0px;
    width: 100%;

    background-color: red;
}

body {
    margin: 0px;
    padding: 0px;
}

#container {
    min-width: auto;
    position: relative;
/*  height: 77%;*/
    width: 550px;
    margin: 0 auto;
/*  margin-top:7%;*/
}

#controllers {

    position: static;
    height: 20px;
}

#previous {
    position: absolute;
    left: 0px;
}

#next {
    position: absolute;
    right: 0px;
}

#tag {
    position: static;
    height: 20px;
    line-height: 1.7em;
    padding-top: 5px;
}


.buttons {
    cursor: pointer;
}


#imagewrap{
    border: 1px solid #818181;
    overflow: hidden;
    z-index: 2;
    background-color: red;
}

#front {
    display: block;
}

谢谢，

大卫

【问题讨论】：

标签： html css height footer

【解决方案1】：

#wrap {
    min-height: calc(100vh-200px);
}

这会将换行设置为屏幕高度减去页眉和页脚的高度。

200px 的值可以改成页眉和页脚的组合高度。

【讨论】：

【解决方案2】：

问题在于您的主 div 占用的空间非常小，因此主体会延伸以覆盖屏幕。在这种情况下，您可以将页脚始终固定在最低位置

@font-face {font-family: Eagle-Light;
                    src: url("Eagle-Light.otf") format("opentype");
                    }

@font-face {font-family: Raleway Light;
                    src: url("Raleway Light.otf") format("opentype");
                    }

body {
/*  height: 100%;*/
    background-color: green;
}

#header {
    height: 100px;
    width: 100%;
    background-color: yellow;
}

#footer {
    position: absolute;
    height: 100px;
    width: 100%;
    background-color: yellow;
    display: block;
    bottom: 0;
}

p {
    color: #818181;
    font-family: Eagle-Light;
    line-height: 1.7em;
    padding: 0px;
    margin: 0px;
    font-size: 0.5em;
    letter-spacing: 0.21em;
}


a:link {
    text-decoration: none;
    color: inherit;
}

a:visited {
    text-decoration: none;
    color: inherit;
}

div {
    margin: 0px;
    padding: 0px;
}

#wrap {
    clear: both;

    padding: 0px;
    width: 100%;

    background-color: red;
}

body {
    margin: 0px;
    padding: 0px;
}

#container {
    min-width: auto;
    position: relative;
/*  height: 77%;*/
    width: 550px;
    margin: 0 auto;
/*  margin-top:7%;*/
}

#controllers {

    position: static;
    height: 20px;
}

#previous {
    position: absolute;
    left: 0px;
}

#next {
    position: absolute;
    right: 0px;
}

#tag {
    position: static;
    height: 20px;
    line-height: 1.7em;
    padding-top: 5px;
}


.buttons {
    cursor: pointer;
}


#imagewrap{
    border: 1px solid #818181;
    overflow: hidden;
    z-index: 2;
    background-color: red;
}

#front {
    display: block;
}

<!DOCTYPE html>
<html lang="en-US">
    <head>    
        <meta charset="UTF-8">    
        <title>Photography</title>    
        <link rel="stylesheet" type="text/css" href="./styles.css">    
    </head>
    <body>    
    <div id="header">
    </div>    
        <div id="wrap">   
            <div id="container">
                <div id="controllers">
                    <div id="previous" class="buttons">
                        <p id="try" onclick="change(-1);">PREVIOUS</p>
                    </div>
                    <div id="next" class="buttons">
                        <p id="try2" onclick="change(1);">NEXT</p>
                    </div>   
                </div>  
                <div id="imagewrap">
                    <img src="Images/01PARANA/Image1.jpg" height="100%" id="front" />
                </div>    
                <div>
                    <p id="tag">Text</p>
                </div>    
            </div>   
        </div>   
    <div id="footer">
    </div> 
        <script type="text/javascript" src="JavaScript2.js"></script>    
    </body>

    </html>

【讨论】：