如何让主 div 填充尽可能多的垂直空间
Posted
技术标签:
【中文标题】如何让主 div 填充尽可能多的垂直空间【英文标题】：How to get the main div to fill as much vertical space as possible 【发布时间】：2017-06-23 15:08: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" 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;
谢谢，
大卫
【问题讨论】：
【参考方案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" 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 填充尽可能多的垂直空间的主要内容，如果未能解决你的问题，请参考以下文章