Question

＆＃13;

html, body {cursor:url(files/cursor.cur),progress;height:100%;}
html{background-color:blue;background-image:url(files/bg.jpg);background-attachment:fixed;background-position:center;background-size:cover;}
body{width:80%;background-color:rgba(255,255,255,0.75);margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;}
p{margin-right:10px;margin-left:10px;text-align: center;}
iframe{overflow:hidden;height:80%;width:100%;}
img{display:block;margin-left:auto;margin-right:auto;}
table{border-collapse:collapse;font-family:calibri;border-style:outset;border-color:#FFFF00;border-width:5px;}
td{font-size:16px;border-width:1px;border-style:solid;border-color:#FFFF00;background-color:#FFFFFF}
th{font-size:18px;font-weight:bold;background-color:#FFEE00;border-color:#FFFF00;border-style:solid;border-width:1px;}
a.active{background-color:#0088FF !important;}
a.active:hover{background-color:#00AAFF !important;}
.font1{font-family:calibri;font-size:16px;}
.font2{font-family:calibri;font-size:18px;text-decoration:underline;}
#menu1 a{display:block;background-color:#0066FF;text-decoration:none;font-family:calibri;font-size:20px;color:#FFFFFF;padding:10px 10px;} 
#menu1 a:hover{background-color:#00AAFF;} 
#menu1 li{display:inline-block;} 
#menu1 ul{list-style:none;text-align:center;margin:0 auto;padding:0px;}
#menu2 a{display:block;background-color:#0066FF;text-decoration:none;font-family:calibri;font-size:16px;color:#FFFFFF;padding:10px 10px;} 
#menu2 a:hover{background-color:#00AAFF;} 
#menu2 li{display:inline-block;}
#menu2 ul{list-style:none;text-align:center;margin:0 auto;padding:0px;}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title>De Geoclub</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <br>
        <div id="menu1"><ul><li><a href="index.html">Welkom</a></li><li><a href="agenda.html">Agenda</a></li><li><a href="fotos.html">Foto's</a></li><li><a href="contact.html">Contact</a></li></ul></div>
        <p><span class="font2">De Geoclub</span><br><br><span class="font1">Welkom op de website van de Geoclub. De Geoclub wordt gehouden in Reggesteyn Noetsele en is voor de leerlingen en oudleerlingen van Reggesteyn. Onze leider is Mr. Nauta, een docent aardrijkskunde op Reggesteyn Noetsele. Bij de Geoclub hebben we het over stenen, fossielen en mineralen. We houden soms bijeenkomsten en excursies. Om de twee jaar houden we een grote, meerdaagse excursie. Hieronder kun je lezen over de bijeenkomsten en excursies. Verder kun je op onze website de agenda van de Geoclub bekijken en de foto's die we hebben genomen bekijken. Je kunt onder het tabblad 'contact' de adresgegevens van Mr. Nauta vinden. Veel plezier!</span></p>
        <p><span class="font2">De Bijeenkomsten</span><br><br><span class="font1">Ongeveer eens per maand houden we een bijeenkomst in lokaal 209 in het gebouw van Reggesteyn Noetsele, meestal om 14.45. Soms bereidt Mr. Nauta iets voor en soms bereidt een leerling iets voor. We eten en drinken halverwege ook iets. Als je wilt weten wanneer de bijeenkomsten zijn, kun je kijken op de agenda. Voor de exacte tijden en mogelijke wijzigingen stuurt Mr. Nauta je een mailtje. Zorg er dus voor dat hij je emailadres heeft. Mr. Nauta's emailadres kun je vinden onder 'contact'. Je bent altijd welkom bij een bijeenkomst, het is niet verplicht. Verder zijn de bijeenkomsten gratis.</span></p>
        <p><span class="font2">De Excursies</span><br><br><span class="font1">Met de Geoclub houden we ongeveer drie keer per jaar een excursie. Eens in de twee jaar houden we een grote, meerdaagse excursie. Meestal bereiden we in de bijeenkomst voor een excursie de excursie voor, en in de bijeenkomst na de excursie laten we onze vondsten zien. Tijdens de excursies gaan we een aantal groeves langs om te zoeken naar stenen, fossielen en mineralen. Mr. Nauta en enkele ouders rijden. We vertrekken meestal rond 9 uur en we zijn rond 5 uur weer terug. Bij de grote excursies gaan we drie tot vier dagen weg. We gaan dan bijvoorbeeld naar Duitsland of Frankrijk. We kamperen daar of we huren een huisje. We zoeken naar stenen, fossielen en mineralen in de buurt van waar we overnachten. In de periode voor de grote excursie krijg je meer duidelijke informatie over de excursie.<br><br>Bij de gewone excursies is het handig om de volgende dingen mee te nemen: eten en drinken, een (moker) hamer, een puntige steenbeitel en een platte steenbeitel, iets om je vondsten in te bewaren en wat closetpapier om breekbare vondsten in te bewaren.<br><br>De gewone excursies kosten ongeveer 10 euro (voor benzine). De grote excursies kosten rond de honderd euro (voor benzine, eten en overnachting).</span></p>
    </body>
</html>

＆＃13;

如果我将页面减半，则文本会从白色标记的正文部分中删除。如果没有将我的页面设置为120％，有没有办法解决这个问题？我正在寻找能够自动将身体与文本对齐的东西。（CSS脚本中可能存在一些相反的属性。）

感谢您的尝试！

更新

我试过去掉身高：100％;属性，但这是结果:(在整页中运行。）

＆＃13;

html, body {cursor:url(files/cursor.cur),progress;}
html{background-color:blue;background-image:url(files/bg.jpg);background-attachment:fixed;background-position:center;background-size:cover;height:100%;}
body{width:80%;background-color:rgba(255,255,255,0.75);margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;}
p{margin-right:10px;margin-left:10px;text-align: center;}
iframe{overflow:hidden;height:80%;width:100%;}
img{display:block;margin-left:auto;margin-right:auto;}
table{border-collapse:collapse;font-family:calibri;border-style:outset;border-color:#FFFF00;border-width:5px;}
td{font-size:16px;border-width:1px;border-style:solid;border-color:#FFFF00;background-color:#FFFFFF}
th{font-size:18px;font-weight:bold;background-color:#FFEE00;border-color:#FFFF00;border-style:solid;border-width:1px;}
a.active{background-color:#0088FF !important;}
a.active:hover{background-color:#00AAFF !important;}
.font1{font-family:calibri;font-size:16px;}
.font2{font-family:calibri;font-size:18px;text-decoration:underline;}
#menu1 a{display:block;background-color:#0066FF;text-decoration:none;font-family:calibri;font-size:20px;color:#FFFFFF;padding:10px 10px;} 
#menu1 a:hover{background-color:#00AAFF;} 
#menu1 li{display:inline-block;} 
#menu1 ul{list-style:none;text-align:center;margin:0 auto;padding:0px;}
#menu2 a{display:block;background-color:#0066FF;text-decoration:none;font-family:calibri;font-size:16px;color:#FFFFFF;padding:10px 10px;} 
#menu2 a:hover{background-color:#00AAFF;} 
#menu2 li{display:inline-block;}
#menu2 ul{list-style:none;text-align:center;margin:0 auto;padding:0px;}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title>De Geoclub</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <br>
        <div id="menu1"><ul><li><a href="index.html">Welkom</a></li><li><a href="agenda.html">Agenda</a></li><li><a href="fotos.html">Foto's</a></li><li><a href="contact.html">Contact</a></li></ul></div>
        <p><span class="font2">De Geoclub</span><br><br><span class="font1">Welkom op de website van de Geoclub. De Geoclub wordt gehouden in Reggesteyn Noetsele en is voor de leerlingen en oudleerlingen van Reggesteyn. Onze leider is Mr. Nauta, een docent aardrijkskunde op Reggesteyn Noetsele. Bij de Geoclub hebben we het over stenen, fossielen en mineralen. We houden soms bijeenkomsten en excursies. Om de twee jaar houden we een grote, meerdaagse excursie. Hieronder kun je lezen over de bijeenkomsten en excursies. Verder kun je op onze website de agenda van de Geoclub bekijken en de foto's die we hebben genomen bekijken. Je kunt onder het tabblad 'contact' de adresgegevens van Mr. Nauta vinden. Veel plezier!</span></p>
        <p><span class="font2">De Bijeenkomsten</span><br><br><span class="font1">Ongeveer eens per maand houden we een bijeenkomst in lokaal 209 in het gebouw van Reggesteyn Noetsele, meestal om 14.45. Soms bereidt Mr. Nauta iets voor en soms bereidt een leerling iets voor. We eten en drinken halverwege ook iets. Als je wilt weten wanneer de bijeenkomsten zijn, kun je kijken op de agenda. Voor de exacte tijden en mogelijke wijzigingen stuurt Mr. Nauta je een mailtje. Zorg er dus voor dat hij je emailadres heeft. Mr. Nauta's emailadres kun je vinden onder 'contact'. Je bent altijd welkom bij een bijeenkomst, het is niet verplicht. Verder zijn de bijeenkomsten gratis.</span></p>
        <p><span class="font2">De Excursies</span><br><br><span class="font1">Met de Geoclub houden we ongeveer drie keer per jaar een excursie. Eens in de twee jaar houden we een grote, meerdaagse excursie. Meestal bereiden we in de bijeenkomst voor een excursie de excursie voor, en in de bijeenkomst na de excursie laten we onze vondsten zien. Tijdens de excursies gaan we een aantal groeves langs om te zoeken naar stenen, fossielen en mineralen. Mr. Nauta en enkele ouders rijden. We vertrekken meestal rond 9 uur en we zijn rond 5 uur weer terug. Bij de grote excursies gaan we drie tot vier dagen weg. We gaan dan bijvoorbeeld naar Duitsland of Frankrijk. We kamperen daar of we huren een huisje. We zoeken naar stenen, fossielen en mineralen in de buurt van waar we overnachten. In de periode voor de grote excursie krijg je meer duidelijke informatie over de excursie.<br><br>Bij de gewone excursies is het handig om de volgende dingen mee te nemen: eten en drinken, een (moker) hamer, een puntige steenbeitel en een platte steenbeitel, iets om je vondsten in te bewaren en wat closetpapier om breekbare vondsten in te bewaren.<br><br>De gewone excursies kosten ongeveer 10 euro (voor benzine). De grote excursies kosten rond de honderd euro (voor benzine, eten en overnachting).</span></p>
    </body>
</html>

＆＃13;

我希望白色的身体至少到达页面的底部，但如果文本超出页面，则更远。很抱歉不清楚。

更新

使用min-height属性并不起作用。该页面保留在代码段2中。

Answer 1

由身体上的height: 100%引起，删除它并包含文字。

Answer 2

您的身体设为height: 100%;。将其更改为height: auto;。否则，即使它向外滚动，身体也会保持与窗口相同的高度。如果您希望它至少是窗口的整个高度，您可以设置min-height: 100%;。

Answer 3

将height: auto;添加到body标记CSS而不是height: 100%;。

Answer 4

我认为问题在于底部段落和正文之间的边缘崩溃。

你可以通过在身体底部添加一些填充或边框来解决它。

在我的示例中，我添加了padding-bottom: 1px，这允许主体的背景完全封闭段落的高度以及段落的上下边距。

您没有在页面顶部看到此效果，因为您将组成菜单的ul的上边距设置为零。

如果内容的高度未填满页面，则仍需要在正文上设置min-height: 100%以将背景颜色扩展到页面底部。为了安全起见，我添加了box-sizing: border-box;来补偿1px填充。

总之，如果内容足够长以导致页面滚动，则需要1px填充来修复折叠边距问题。对于较短的页面，使用min-height: 100%强制主体延伸到页面的底部（在这种情况下，折叠边距问题可能不会显示）。

html,
body {
  cursor: url(files/cursor.cur), progress;
}
html {
  background-color: blue;
  background-image: url(files/bg.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  height: 100%;
}
body {
  width: 80%;
  background-color: rgba(255, 255, 255, 0.75);
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 1px; /* stops margins from collapsing */
  min-height: 100%;
  box-sizing: border-box;
}
p {
  margin-right: 10px;
  margin-left: 10px;
  text-align: center;
}
iframe {
  overflow: hidden;
  height: 80%;
  width: 100%;
}
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
table {
  border-collapse: collapse;
  font-family: calibri;
  border-style: outset;
  border-color: #FFFF00;
  border-width: 5px;
}
td {
  font-size: 16px;
  border-width: 1px;
  border-style: solid;
  border-color: #FFFF00;
  background-color: #FFFFFF
}
th {
  font-size: 18px;
  font-weight: bold;
  background-color: #FFEE00;
  border-color: #FFFF00;
  border-style: solid;
  border-width: 1px;
}
a.active {
  background-color: #0088FF !important;
}
a.active:hover {
  background-color: #00AAFF !important;
}
.font1 {
  font-family: calibri;
  font-size: 16px;
}
.font2 {
  font-family: calibri;
  font-size: 18px;
  text-decoration: underline;
}
#menu1 a {
  display: block;
  background-color: #0066FF;
  text-decoration: none;
  font-family: calibri;
  font-size: 20px;
  color: #FFFFFF;
  padding: 10px 10px;
}
#menu1 a:hover {
  background-color: #00AAFF;
}
#menu1 li {
  display: inline-block;
}
#menu1 ul {
  list-style: none;
  text-align: center;
  margin: 0 auto;
  padding: 0px;
}
#menu2 a {
  display: block;
  background-color: #0066FF;
  text-decoration: none;
  font-family: calibri;
  font-size: 16px;
  color: #FFFFFF;
  padding: 10px 10px;
}
#menu2 a:hover {
  background-color: #00AAFF;
}
#menu2 li {
  display: inline-block;
}
#menu2 ul {
  list-style: none;
  text-align: center;
  margin: 0 auto;
  padding: 0px;
}

<div id="menu1">
    <ul>
      <li><a href="index.html">Welkom</a>
      </li>
      <li><a href="agenda.html">Agenda</a>
      </li>
      <li><a href="fotos.html">Foto's</a>
      </li>
      <li><a href="contact.html">Contact</a>
      </li>
    </ul>
  </div>
  <p><span class="font2">De Geoclub</span>
    <br>
    <br><span class="font1">Welkom op de website van de Geoclub. De Geoclub wordt gehouden in Reggesteyn Noetsele en is voor de leerlingen en oudleerlingen van Reggesteyn. Onze leider is Mr. Nauta, een docent aardrijkskunde op Reggesteyn Noetsele. Bij de Geoclub hebben we het over stenen, fossielen en mineralen. We houden soms bijeenkomsten en excursies. Om de twee jaar houden we een grote, meerdaagse excursie. Hieronder kun je lezen over de bijeenkomsten en excursies. Verder kun je op onze website de agenda van de Geoclub bekijken en de foto's die we hebben genomen bekijken. Je kunt onder het tabblad 'contact' de adresgegevens van Mr. Nauta vinden. Veel plezier!</span>
  </p>
  <p><span class="font2">De Bijeenkomsten</span>
    <br>
    <br><span class="font1">Ongeveer eens per maand houden we een bijeenkomst in lokaal 209 in het gebouw van Reggesteyn Noetsele, meestal om 14.45. Soms bereidt Mr. Nauta iets voor en soms bereidt een leerling iets voor. We eten en drinken halverwege ook iets. Als je wilt weten wanneer de bijeenkomsten zijn, kun je kijken op de agenda. Voor de exacte tijden en mogelijke wijzigingen stuurt Mr. Nauta je een mailtje. Zorg er dus voor dat hij je emailadres heeft. Mr. Nauta's emailadres kun je vinden onder 'contact'. Je bent altijd welkom bij een bijeenkomst, het is niet verplicht. Verder zijn de bijeenkomsten gratis.</span>
  </p>
  <p><span class="font2">De Excursies</span>
    <br>
    <br><span class="font1">Met de Geoclub houden we ongeveer drie keer per jaar een excursie. Eens in de twee jaar houden we een grote, meerdaagse excursie. Meestal bereiden we in de bijeenkomst voor een excursie de excursie voor, en in de bijeenkomst na de excursie laten we onze vondsten zien. Tijdens de excursies gaan we een aantal groeves langs om te zoeken naar stenen, fossielen en mineralen. Mr. Nauta en enkele ouders rijden. We vertrekken meestal rond 9 uur en we zijn rond 5 uur weer terug. Bij de grote excursies gaan we drie tot vier dagen weg. We gaan dan bijvoorbeeld naar Duitsland of Frankrijk. We kamperen daar of we huren een huisje. We zoeken naar stenen, fossielen en mineralen in de buurt van waar we overnachten. In de periode voor de grote excursie krijg je meer duidelijke informatie over de excursie.<br><br>Bij de gewone excursies is het handig om de volgende dingen mee te nemen: eten en drinken, een (moker) hamer, een puntige steenbeitel en een platte steenbeitel, iets om je vondsten in te bewaren en wat closetpapier om breekbare vondsten in te bewaren.<br><br>De gewone excursies kosten ongeveer 10 euro (voor benzine). De grote excursies kosten rond de honderd euro (voor benzine, eten en overnachting).</span>
  </p>

为什么我的段落离开了我的身体？

4 个答案: