CSS, ul, создающий пустое пространство внизу страницы

-2

Я работаю над ul, чтобы показать информацию в нижней части моей страницы, но она создает огромное пустое пространство внизу.CSS, ul, создающий пустое пространство внизу страницы

Я бы хотел, чтобы мой нижний индекс не был частью первых 100% высоты экрана, так что пользователь должен прокрутить вниз.

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 150%; 
 
} 
 
.bottomInfo ul li { 
 
    display: block; 
 
    padding: 7px; 
 
    color: #c0c0c0; 
 
} 
 
.bottomInfo ul li:first-child { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    bottom: 11px; 
 
    font-size: 100%; 
 
} 
 
.bottomInfo ul { 
 
    top: 20%; 
 
    left: 10%; 
 
    margin: 5px; 
 
    position: absolute; 
 
} 
 
.bottomInfo { 
 
    color: white; 
 
    width: 100%; 
 
    height: 50%; 
 
    top: 100%; 
 
    background-color: #003047; 
 
    position: absolute; 
 
    font-size: 75%; 
 
}

<div class="bottomInfo"> 
 
    <ul> 
 
    <li>About</li> 
 
    <li>Newsletter</li> 
 
    <li>Updates</li> 
 
    <li>About the organisation</li> 
 
    <li>Complaints</li> 
 
    </ul> 
 
</div>

источник

2015-10-11 JonCode

Я бы предположил, что вы хотите получить «margin-top: 100vh» в своем DIV, а не в своем абсолютном позиционировании. – Martin

Создайте фрагмент, пожалуйста, так как нам нужно увидеть остальную часть html. Кроме того, возможно, установка такого тела вызывает некоторые проблемы 'height: 150%;' ... и 'position: absolute;' need' position: relative; 'on its parent ... – LGSon

Высота вашего bottomInfo составляет 50% высоты экрана, поэтому вам нужно изменить стратегию и исправить свой код. Мы не можем дать ответ, не видя полного источника. –

Проблема с вами указана высота тела до 150%, так что его с большой высоты. Удалите высоту с тела, она будет автоматически подниматься и подталкивает вашу нижнюю информацию ниже видового экрана.

Вот тело CSS должно выглядеть так.

body { 
margin: 0; 
padding: 0; 
width: 100%; 
height: 100%; //or remove it 
}

источник

2015-10-11 15:35:51 shiva


             
   
    
    body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 

 
} 
 
.placeholder{height:1000px;width:90%;border:5px solid pink;} 
 
.bottomInfo ul li { 
 
    display: block; 
 
    padding: 7px; 
 
    color: #c0c0c0; 
 
} 
 
.bottomInfo ul li:first-child { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    bottom: 11px; 
 
    font-size: 1em; 
 
} 
 
.bottomInfo ul { 
 
    top: 20%; 
 
    left: 10%; 
 
    margin: 5px; 
 
    
 
} 
 
.bottomInfo { 
 
    position:fixed; 
 
    bottom:0;left:0; 
 
    color: white; 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: #003047; 
 
    font-size: .75em; 
 
} 
    <div class="placeholder"></div> 
 
<div class="bottomInfo"> 
 
    <ul> 
 
    <li>About</li> 
 
    <li>Newsletter</li> 
 
    <li>Updates</li> 
 
    <li>About the organisation</li> 
 
    <li>Complaints</li> 
 
    </ul> 
 
</div>

здесь вы идете. Я изменил некоторые вещи, но все должно быть ясно.

Cheers.

источник

2015-10-11 17:35:41

CSS, ul, создающий пустое пространство внизу страницы

ответ

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