2015-04-18 3 views
2

Почему мой абзац из моего тела?

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;}
<!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>

Если я вдвое сократить мою страницу, текст выходит из белого отмечены части тела. Есть ли способ решить эту проблему без установки моей страницы на 120%? Я ищу что-то, что автоматически привяжет тело к тексту. (В сценарии CSS могут быть некоторые противоположные свойства.)

Спасибо за попытку!

Update:

Я попытался удалить высоту: 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;} 
 
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;}
<!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>

Я хочу белое тело, чтобы достичь, по крайней мере, в нижней части страницы, а дальше, если текст превышает стр. Извините за то, что я не понимаю.

Update:

Используя свойство мин-высота не работает. Страница осталась такой же, как в фрагменте 2.

+0

Выполнить фрагмент кода, нажмите на всю страницу и изменить размер окна на половину экрана. Вы поймете, что я имею в виду. – HYBR1D

ответ

2

Это вызвано height: 100% на корпусе, удалите его и текст будет содержать.

+0

Спасибо, я попробую. – HYBR1D

0

Добавить height: auto; в body тег CSS вместо height: 100%;.

1

Ваше тело установлено на height: 100%;. Измените его на height: auto;. В противном случае тело остается той же высоты, что и окно, даже когда оно прокручивается в сторону. Если вы хотите, чтобы он был как минимум на всю высоту окна, вы можете установить min-height: 100%;.

+0

Я полагаю, вы имеете в виду минимальную высоту? Я попробую. – HYBR1D

+0

Это не сработало. Страница остается такой же, как во втором фрагменте. Я удалил все свойства высоты из тела и html, а затем добавил: html, body {min-height: 100%;} – HYBR1D

+0

оставьте тело html {height: 100%;} на {height: auto; min-height: 100%}. Вы хотите, чтобы html был полной высотой окна, но позволял телу быть больше, чем это (если контент подталкивает его больше, как в вашем случае). Минимальная высота тела гарантирует, что она не меньше, чем html. Отличный способ увидеть все это - использовать инструменты разработчика Chrome. Когда вы наводите курсор на какой-либо элемент, он выделяет пространство, которое он занимает. Вы можете изменить свой css и сразу увидеть эффекты. –

0

Я думаю, что проблема заключается в разваливании поля между нижним абзацем и телом.

Вы можете обойти это, добавив либо прописку, либо границу внизу тела.

В моем примере я добавил 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>

Смежные вопросы