- Проблем с Sticky footer
WT форуми -> HTML / Javascript / CSS -> Проблем с Sticky footer
Създайте нова тема Напишете отговор 
Автор Съобщение
pro12
Турист
Турист

Регистриран на: 10/01/2013 5:08 pm

Support: 0
Bonus: 0
Мнения: 416
Мнение 21/06/2017 8:04 pm     Проблем с Sticky footer Отговорете с цитат


Това ми е html5 страницата
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>The Sticky Footer Way</title>
<link rel='stylesheet' href='style.css'>
<meta name="viewport" content="width=device-width,initial-scale=1">

</head>
<body>
<header>
<nav>
<li>Your menu</li>
</nav>
</header>
<main class='wrapper'>
<section class="left">
left
</section >
<aside class="aside-right">
right
</aside> <div class='push'></div>
</main>

<footer class='footer'>This is my Footer</footer>
</body>
</html>

Това ми е css
CSS code:
html, body {
height: 100%;
margin: 0;

}
.wrapper {
min-height: 100%;

margin-bottom: -100px;
}
header
{
width:100%;
height:66px; background: red;
}
.left
{
width:50%;
height:100%;
background: yellow;
float:left;
} .aside-right{
width:50%;
background: blue;
float: right; }
.footer,
.push {
height: 100px;
}
.footer {
background-color: #a12444;
}

Ако в лявата част имам дълг текст и мине през footer тои се вдига на горе.
Но ако премахна float:left; и float: right; footer си седи най отдолу на страницата, но не знам как да направя лявата и дясната част да изглеждат както трябва без float:left; и float: right;.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
vinsbg
Редовен
Редовен

Регистриран на: 28/01/2009 2:21 pm

Support: 51
Bonus: 87
Мнения: 2564
Мнение 22/06/2017 6:06 am      Отговорете с цитат


Пробвай с този css

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px;
}
.wrapper {
    min-height: 100%;
    margin-bottom: -100px;
}
header {
    width:100%;
    height:66px; background: red;
 }
.left {
    width:50%;
    height:100%;
    background: yellow;
    float:left;
 }
 .aside-right {
    width:50%;
    background: blue;
    float: right;
 }
footer {
    background-color: #a12444;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

Ето и демо: https://jsfiddle.net/p0h1ag51/
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение Посетете сайта на потребителя
Fakeheal
Support
Support

Регистриран на: 17/04/2010 8:37 am

Support: 342
Bonus: 682
Мнения: 2564
Мнение 22/06/2017 9:41 am      Отговорете с цитат


vinsbg написа:

Ето и демо: https://jsfiddle.net/p0h1ag51/


Само да предупредя, че с този начин, ако имаш текст (или някакви елементи) в лявата и дясната секция няма да се вижда от фуутъра.

Пример: https://jsfiddle.net/p0h1ag51/1/
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
vinsbg
Редовен
Редовен

Регистриран на: 28/01/2009 2:21 pm

Support: 51
Bonus: 87
Мнения: 2564
Мнение 22/06/2017 5:25 pm      Отговорете с цитат


Fakeheal написа:
vinsbg написа:

Ето и демо: https://jsfiddle.net/p0h1ag51/


Само да предупредя, че с този начин, ако имаш текст (или някакви елементи) в лявата и дясната секция няма да се вижда от фуутъра.

Пример: https://jsfiddle.net/p0h1ag51/1/

Правилно. Пропуснал съм го.

Не знам колко е "елегантно", но в този случай може един clear:both да се сложи:
https://jsfiddle.net/p0h1ag51/2/
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение Посетете сайта на потребителя
Fakeheal
Support
Support

Регистриран на: 17/04/2010 8:37 am

Support: 342
Bonus: 682
Мнения: 2564
Мнение 22/06/2017 8:47 pm      Отговорете с цитат


Според мен ще е хубаво да е в <main>, а не извън него. Иначе е супер.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
pro12
Турист
Турист

Регистриран на: 10/01/2013 5:08 pm

Support: 0
Bonus: 0
Мнения: 416
Мнение 22/06/2017 9:34 pm      Отговорете с цитат


С clear:both footer се вдига на горе. Проблем с Sticky footer
Без clear:both footer си седи най отдолу на страницата.
Проблем с Sticky footer
И по двата начина дългият текст в лявата част отива под footer
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
vinsbg
Редовен
Редовен

Регистриран на: 28/01/2009 2:21 pm

Support: 51
Bonus: 87
Мнения: 2564
Мнение 23/06/2017 6:02 am      Отговорете с цитат


И на двете снимки се вижда, че <div class="clear"></div> си го сложил в main-a. Премести го извън мейна. Извън него при мен си работи, както на демото.


Проблем с Sticky footer
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение Посетете сайта на потребителя
pro12
Турист
Турист

Регистриран на: 10/01/2013 5:08 pm

Support: 0
Bonus: 0
Мнения: 416
Мнение 23/06/2017 12:41 pm      Отговорете с цитат


Благодаря за помощта!
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
Покажи мнения от преди:    
Създайте нова тема   Напишете отговор    web-tourist.net Форуми -> HTML / Javascript / CSS Часовете са според зоната GMT + 2 Часа
Страница 1 от 1


 
Идете на:  
Не Можете да пускате нови теми
Не Можете да отговаряте на темите
Не Можете да променяте съобщенията си
Не Можете да изтривате съобщенията си
Не Можете да гласувате в анкети