Проблем с Sticky footer

Post Reply
pro12
Турист
Турист
Posts: 452
Joined: Thu Jan 10, 2013 3:08 pm

Проблем с Sticky footer

Post by pro12 » Wed Jun 21, 2017 6:04 pm

Това ми е html5 страницата [html]<!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>[/html]
Това ми е css
[css]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;
}[/css]
Ако в лявата част имам дълг текст и мине през footer тои се вдига на горе.
Но ако премахна float:left; и float: right; footer си седи най отдолу на страницата, но не знам как да направя лявата и дясната част да изглеждат както трябва без float:left; и float: right;.

User avatar
vinsbg
Гуру
Гуру
Posts: 2604
Joined: Wed Jan 28, 2009 12:21 pm
Answers: 51
Location: София
Contact:

Post by vinsbg » Thu Jun 22, 2017 4:06 am

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

Code: Select all

html &#123;
    position&#58; relative;
    min-height&#58; 100%;
&#125;
body &#123;
    margin&#58; 0 0 100px;
&#125;
.wrapper &#123;
    min-height&#58; 100%;
    margin-bottom&#58; -100px; 
&#125;
header &#123;
    width&#58;100%;
    height&#58;66px; background&#58; red;
 &#125;
.left &#123;
    width&#58;50%;
    height&#58;100%;
    background&#58; yellow;
    float&#58;left;
 &#125; 
 .aside-right &#123; 
    width&#58;50%;
    background&#58; blue;
    float&#58; right; 
 &#125;
footer &#123;
    background-color&#58; #a12444;
    position&#58; absolute;
    left&#58; 0;
    bottom&#58; 0;
    height&#58; 100px;
    width&#58; 100%;
&#125;
Ето и демо: https://jsfiddle.net/p0h1ag51/

Fakeheal
Гуру
Гуру
Posts: 2703
Joined: Sat Apr 17, 2010 6:37 am
Answers: 351
Location: /r/eyebleach
Contact:

Post by Fakeheal » Thu Jun 22, 2017 7:41 am

vinsbg wrote: Ето и демо: https://jsfiddle.net/p0h1ag51/
Само да предупредя, че с този начин, ако имаш текст (или някакви елементи) в лявата и дясната секция няма да се вижда от фуутъра.

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

User avatar
vinsbg
Гуру
Гуру
Posts: 2604
Joined: Wed Jan 28, 2009 12:21 pm
Answers: 51
Location: София
Contact:

Post by vinsbg » Thu Jun 22, 2017 3:25 pm

Fakeheal wrote:
vinsbg wrote: Ето и демо: https://jsfiddle.net/p0h1ag51/
Само да предупредя, че с този начин, ако имаш текст (или някакви елементи) в лявата и дясната секция няма да се вижда от фуутъра.

Пример: https://jsfiddle.net/p0h1ag51/1/
Правилно. Пропуснал съм го.

Не знам колко е "елегантно", но в този случай може един clear:both да се сложи:
https://jsfiddle.net/p0h1ag51/2/

Fakeheal
Гуру
Гуру
Posts: 2703
Joined: Sat Apr 17, 2010 6:37 am
Answers: 351
Location: /r/eyebleach
Contact:

Post by Fakeheal » Thu Jun 22, 2017 6:47 pm

Според мен ще е хубаво да е в <main>, а не извън него. Иначе е супер.

pro12
Турист
Турист
Posts: 452
Joined: Thu Jan 10, 2013 3:08 pm

Post by pro12 » Thu Jun 22, 2017 7:34 pm

С clear:both footer се вдига на горе. Image
Без clear:both footer си седи най отдолу на страницата.
Image
И по двата начина дългият текст в лявата част отива под footer

User avatar
vinsbg
Гуру
Гуру
Posts: 2604
Joined: Wed Jan 28, 2009 12:21 pm
Answers: 51
Location: София
Contact:

Post by vinsbg » Fri Jun 23, 2017 4:02 am

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


Image

pro12
Турист
Турист
Posts: 452
Joined: Thu Jan 10, 2013 3:08 pm

Post by pro12 » Fri Jun 23, 2017 10:41 am

Благодаря за помощта!

Post Reply