Question

我有一个摄影网站的项目。我很新，所以仍然在努力学习一些基础知识。我的项目将有一个标题，一个显示照片的主要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;
}

谢谢，

大卫

Answer 1

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

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

200px值只能更改为页眉和页脚的组合高度。

Answer 2

问题是你的主要占用很小的空间，因此身体延伸到屏幕。在这种情况下，您可以将页脚始终固定在最低位置

@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>

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

2 个答案: