我需要body div能够随着内容和div放置在其中，这样当内容在页面中垂直增长时，身体背景也随之增长。这是当前问题的图像：http://prntscr.com/dyknn4看看身体中的蓝色背景是如何停止的，因为BODY div没有垂直扩展内容？ - 已经尝试过背景重复y
感谢任何帮助！
body{
min-height: 100%;
min-width:100%;
font-family: 'Open Sans', sans-serif;
background-image: url("images/background.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
height: 100vh;
}
/*LOGO*/
.logo ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
.logo li img {
display: block;
text-align: center;
text-decoration: none;
}
/*NAVBAR*/
nav {
z-index: 1;
}
ul {
z-index: 1;
width: 100%;
height: 48px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: white;
font-size: 125%;
color: black;
}
/*END NAVBAR*/
/*MAIN BODY DIV*/
.wrap {
top: 0;
position: relative;
height: 100%;
width: 70%;
background-image: url("images/backgroundmain.png");
left: 15%;
}
/*LOCAL WEATHER*/
.local {
z-index: -99999999;
position: absolute;
height: 40%;
width: 20%;
} <body>
<!-- NAVBAR -->
<nav class="logo">
<ul>
<li><img src="images/Mlogo.png"></li>
</ul>
</nav>
<nav class="header">
<ul>
<li style="margin-left: 15%"><a href="index2.html">Home</a></li>
<li><a href="#contact">Contact Us</a></li>
<li><a href="#Services">Our Service</a></li>
<li><a href="#Map">Interactive Weather Map</a></li>
<li style="float:right; margin-right: 15%"><a href="#Login">Log In</a></li>
<li style="float:right;"><a href="#Signup">Sign Up</a></li>
</ul>
</nav>
<!-- END NAV -->
<!-- MAIN BODY -->
<div class="wrap">
<!-- LOCAL WEATHER -->
<div class="local">
<p>THIS IS A TEST Spicy jalapeno bacon ipsum dolor amet exercitation pig sausage, rump deserunt cow porchetta. Tenderloin strip steak brisket, meatloaf elit drumstick quis salami irure leberkas frankfurter. Aliqua ut ad, chicken biltong salami bresaola turkey labore ball tip short ribs in. Swine in ut short ribs. Ullamco in meatball venison. Ham hock aliquip dolore cupidatat est. Proident non tri-tip, tempor drumstick mollit veniam ham leberkas laborum tongue filet mignon in deserunt.
Esse tempor aliquip ullamco pork, picanha deserunt dolore pastrami lorem. Swine strip steak fatback beef ribs, incididunt esse cupim non. Tempor shankle jowl picanha exercitation salami. Pastrami tri-tip laboris culpa. Meatball ribeye prosciutto doner eiusmod dolore. Cupim shank spare ribs ground round sausage.
Brisket tail ground round turducken ullamco tongue drumstick anim duis lorem. Commodo labore prosciutto tri-tip capicola ut burgdoggen pig dolore laborum pork adipisicing tail duis. Reprehenderit aliqua tail corned beef. Porchetta ribeye nulla laboris. Corned beef et doner, brisket laboris proident pork loin irure qui ipsum. Ut aliqua strip steak, labore boudin pork esse salami ut burgdoggen occaecat landjaeger consectetur lorem aliquip.
Pork chop brisket andouille veniam proident boudin deserunt doner. Doner pork belly shoulder chicken in eu pariatur, pork chop dolor culpa duis ground round sint in picanha. Sunt drumstick consectetur, fugiat nisi meatball aute ex do boudin est ea adipisicing magna ad. Reprehenderit cow meatloaf ham hock irure turkey id aliquip brisket. Prosciutto cillum meatball non tenderloin sed. Chicken doner sausage, jowl adipisicing pork belly landjaeger ut strip steak tri-tip exercitation ea non cupim.
Fatback rump officia excepteur prosciutto lorem fugiat tri-tip in pork belly. Short ribs ut filet mignon, sint enim hamburger prosciutto voluptate in alcatra tongue rump duis sirloin ribeye. Reprehenderit esse ut, turducken fugiat consectetur tongue. Meatball short ribs do, enim burgdoggen ut swine rump labore. Cillum leberkas corned beef, pig et ex nostrud turkey.
Excepteur doner tenderloin short ribs ut ut incididunt sint. Ball tip pastrami eu fugiat venison mollit pork lorem. Reprehenderit ball tip proident cillum capicola. Porchetta frankfurter sed tail. Reprehenderit meatball ham hock deserunt aliquip jowl in pig incididunt exercitation beef laborum. Elit ipsum porchetta, ut veniam pork loin ea in sint enim consectetur. Shankle pork loin sirloin excepteur veniam t-bone.
In officia drumstick, consequat est beef ribs adipisicing. Pariatur alcatra swine flank eu deserunt jerky veniam ex pork. Bresaola ullamco short loin, enim spare ribs ground round flank deserunt swine irure dolore cow pork belly velit ribeye. Hamburger esse minim sirloin ribeye tongue quis consectetur. Veniam jerky voluptate sed beef. Chicken ut elit short ribs sirloin.
Sed ut kielbasa capicola tail pastrami in non. Venison occaecat proident laborum aliquip ad ham hock short ribs et frankfurter ea shoulder corned beef laboris deserunt. Rump ham pork tempor tail ham hock. Picanha turkey ea, dolore ipsum swine elit short loin short ribs ut strip steak pork chop. Sirloin shank burgdoggen frankfurter, occaecat sausage velit ex tongue turkey reprehenderit.
Shank do duis eiusmod ball tip brisket ex shankle quis sint bacon anim andouille corned beef. Hamburger turkey in, ea in pork dolore ribeye irure tail. Laborum boudin adipisicing spare ribs dolore consectetur meatloaf reprehenderit, esse aliqua. Brisket est burgdoggen jerky sint pancetta. Aute eu cupidatat ground round leberkas t-bone andouille beef ribs pastrami esse mollit shank. Id jerky pancetta voluptate chuck kevin hamburger ham hock.
Minim porchetta qui, frankfurter meatball nostrud dolore prosciutto dolore velit ad. Officia mollit occaecat duis meatloaf, ground round brisket sausage swine consectetur ipsum short loin cow. Commodo short loin short ribs ad aliquip. Picanha ut jerky, aliquip capicola sed esse venison salami fugiat magna ground round nostrud excepteur kevin. Voluptate meatloaf brisket tail qui jerky kielbasa bresaola aute cupidatat pork mollit. Est laboris nisi ut ut ipsum beef chuck, reprehenderit corned beef velit brisket sint shoulder. Officia rump incididunt dolor brisket qui.</p>
<!-- <img src="images/weatherphoto.png"> -->
</div>
答案 0 :(得分：0)
主体div .wrap由于两个原因而不会增长，首先需要min-height: 100%，其次是内容，.local，{ {1}}，不允许其父级使用其内容增长。
position: absolutebody{
min-height: 100%;
min-width:100%;
font-family: 'Open Sans', sans-serif;
background-image: url("images/background.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
height: 100vh;
}
/*LOGO*/
.logo ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
.logo li img {
display: block;
text-align: center;
text-decoration: none;
}
/*NAVBAR*/
nav {
z-index: 1;
}
ul {
z-index: 1;
width: 100%;
height: 48px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: white;
font-size: 125%;
color: black;
}
/*END NAVBAR*/
/*MAIN BODY DIV*/
.wrap {
top: 0;
position: relative;
min-height: 100%;
width: 70%;
background-image: url("images/backgroundmain.png");
left: 15%;
background-color: lightblue;
}
/*LOCAL WEATHER*/
.local {
height: 40%;
width: 20%;
}
答案 1 :(得分：0)
使用display:table-*属性组，我们可以使.wrap符合其内容。详细信息已注释，并标有✎符号。
<强>段
body {
min-height: 100%;
min-width: 100%;
font-family: 'Open Sans', sans-serif;
background-image: url("images/background.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
height: 100vh;
}
/*LOGO*/
.logo ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
.logo li img {
display: block;
text-align: center;
text-decoration: none;
}
/*NAVBAR*/
nav {
z-index: 1;
}
ul {
z-index: 1;
width: 100%;
height: 48px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: white;
font-size: 125%;
color: black;
}
/*END NAVBAR*/
/*MAIN BODY DIV*/
.wrap {
top: 0;
position: relative;
height: 100%;
width: 70%;
background-image: url("images/backgroundmain.png");
left: 15%;
/* ✎ Added for demo purposes */
background: blue;
/* ✎ A <table> normally conforms to it's content
|| (e.g. <tbody>, <tr>, <td>, <th> etc.) horizontally
|| and vertically
*/
display: table;
}
/*LOCAL WEATHER*/
.local {
/* ✎ Among other elements that are static and those
|| with position declared having a greater z-index will
|| obscure the text if at -999999, Therefore it is reset
|| to 0
*/
z-index: 0;
/* ✎ An absolute value would cause .local to ignore
|| the expansion of it's content, relative does not
*/
position: relative;
height: 40%;
width: 20%;
/* ✎ A table cell (e.g. <td> or <th>) will conform to
|| it's content's size in a vertical fashion
*/
display: table-cell;
}<body>
<!-- NAVBAR -->
<nav class="logo">
<ul>
<li>
<img src="images/Mlogo.png">
</li>
</ul>
</nav>
<nav class="header">
<ul>
<li style="margin-left: 15%"><a href="index2.html">Home</a>
</li>
<li><a href="#contact">Contact Us</a>
</li>
<li><a href="#Services">Our Service</a>
</li>
<li><a href="#Map">Interactive Weather Map</a>
</li>
<li style="float:right; margin-right: 15%"><a href="#Login">Log In</a>
</li>
<li style="float:right;"><a href="#Signup">Sign Up</a>
</li>
</ul>
</nav>
<!-- END NAV -->
<!-- MAIN BODY -->
<div class="wrap">
<!-- LOCAL WEATHER -->
<div class="local">
<p>THIS IS A TEST Spicy jalapeno bacon ipsum dolor amet exercitation pig sausage, rump deserunt cow porchetta. Tenderloin strip steak brisket, meatloaf elit drumstick quis salami irure leberkas frankfurter. Aliqua ut ad, chicken biltong salami bresaola
turkey labore ball tip short ribs in. Swine in ut short ribs. Ullamco in meatball venison. Ham hock aliquip dolore cupidatat est. Proident non tri-tip, tempor drumstick mollit veniam ham leberkas laborum tongue filet mignon in deserunt. Esse tempor
aliquip ullamco pork, picanha deserunt dolore pastrami lorem. Swine strip steak fatback beef ribs, incididunt esse cupim non. Tempor shankle jowl picanha exercitation salami. Pastrami tri-tip laboris culpa. Meatball ribeye prosciutto doner eiusmod
dolore. Cupim shank spare ribs ground round sausage. Brisket tail ground round turducken ullamco tongue drumstick anim duis lorem. Commodo labore prosciutto tri-tip capicola ut burgdoggen pig dolore laborum pork adipisicing tail duis. Reprehenderit
aliqua tail corned beef. Porchetta ribeye nulla laboris. Corned beef et doner, brisket laboris proident pork loin irure qui ipsum. Ut aliqua strip steak, labore boudin pork esse salami ut burgdoggen occaecat landjaeger consectetur lorem aliquip.
Pork chop brisket andouille veniam proident boudin deserunt doner. Doner pork belly shoulder chicken in eu pariatur, pork chop dolor culpa duis ground round sint in picanha. Sunt drumstick consectetur, fugiat nisi meatball aute ex do boudin est
ea adipisicing magna ad. Reprehenderit cow meatloaf ham hock irure turkey id aliquip brisket. Prosciutto cillum meatball non tenderloin sed. Chicken doner sausage, jowl adipisicing pork belly landjaeger ut strip steak tri-tip exercitation ea non
cupim. Fatback rump officia excepteur prosciutto lorem fugiat tri-tip in pork belly. Short ribs ut filet mignon, sint enim hamburger prosciutto voluptate in alcatra tongue rump duis sirloin ribeye. Reprehenderit esse ut, turducken fugiat consectetur
tongue. Meatball short ribs do, enim burgdoggen ut swine rump labore. Cillum leberkas corned beef, pig et ex nostrud turkey. Excepteur doner tenderloin short ribs ut ut incididunt sint. Ball tip pastrami eu fugiat venison mollit pork lorem. Reprehenderit
ball tip proident cillum capicola. Porchetta frankfurter sed tail. Reprehenderit meatball ham hock deserunt aliquip jowl in pig incididunt exercitation beef laborum. Elit ipsum porchetta, ut veniam pork loin ea in sint enim consectetur. Shankle
pork loin sirloin excepteur veniam t-bone. In officia drumstick, consequat est beef ribs adipisicing. Pariatur alcatra swine flank eu deserunt jerky veniam ex pork. Bresaola ullamco short loin, enim spare ribs ground round flank deserunt swine
irure dolore cow pork belly velit ribeye. Hamburger esse minim sirloin ribeye tongue quis consectetur. Veniam jerky voluptate sed beef. Chicken ut elit short ribs sirloin. Sed ut kielbasa capicola tail pastrami in non. Venison occaecat proident
laborum aliquip ad ham hock short ribs et frankfurter ea shoulder corned beef laboris deserunt. Rump ham pork tempor tail ham hock. Picanha turkey ea, dolore ipsum swine elit short loin short ribs ut strip steak pork chop. Sirloin shank burgdoggen
frankfurter, occaecat sausage velit ex tongue turkey reprehenderit. Shank do duis eiusmod ball tip brisket ex shankle quis sint bacon anim andouille corned beef. Hamburger turkey in, ea in pork dolore ribeye irure tail. Laborum boudin adipisicing
spare ribs dolore consectetur meatloaf reprehenderit, esse aliqua. Brisket est burgdoggen jerky sint pancetta. Aute eu cupidatat ground round leberkas t-bone andouille beef ribs pastrami esse mollit shank. Id jerky pancetta voluptate chuck kevin
hamburger ham hock. Minim porchetta qui, frankfurter meatball nostrud dolore prosciutto dolore velit ad. Officia mollit occaecat duis meatloaf, ground round brisket sausage swine consectetur ipsum short loin cow. Commodo short loin short ribs
ad aliquip. Picanha ut jerky, aliquip capicola sed esse venison salami fugiat magna ground round nostrud excepteur kevin. Voluptate meatloaf brisket tail qui jerky kielbasa bresaola aute cupidatat pork mollit. Est laboris nisi ut ut ipsum beef
chuck, reprehenderit corned beef velit brisket sint shoulder. Officia rump incididunt dolor brisket qui.</p>
<!-- <img src="images/weatherphoto.png"> -->
</div>