(raczej to drugie). Słuchajcie, to mój pierwszy post tutaj. Nie mam doświadczenia w pisaniu stron, to co zamieszczam to raczej ćwiczenie. Chodzi o to, że pisałem sobie stronę i sprawdzałem w FF. Potem zapragnąłem obejrzeć ją w Chrome i tu szok niestety. Wiedziałem, że bywają drobne różnice w wyglądzie, ale ta nie jest drobna.
https://kiszuriwalilibori.github.io/ddd/
O ile na urządzeniach stacjonarnych strona wygląda tu i tam tak samo, to na mobilnych absolutnie inaczej. Tak samo jest z normalizerem, jak i css resetem ząłczonym-ani jedno ani drugie nie pomaga. Na tej stronie praktycznie nic nie ma, a to o co mi przede wszystkim chodzi to wielkość czarnego nagłówka. Jest ustawiona wysokośc twardo na 100px. Jeżeli obejrzycie to na mobilu w Chrome to widac po prostu, że to nie ma 100px. Żeby jeszcze bardziej zamotać, narzedzia pokazują, że 100px wysokość tam właśnie jednak jest.
Tak więc mam prośbę, niech mnie ktoś oświeci w temacie, co jest nie tak, tylko prostymi słowami, ja bardzo niedawno zacząłem cokolwiek w tym kierunku robić. Jakby chodziło o sens tego, co robię, to chciałem mieć nieruchomy nagłówek, przesuwalną treść i stopkę zakrywaną przez tę treść. Pożądany widok jest taki, jak w FF.
@import './normalizer.scss';
$hfheight: 100px;
$mainminheight: 400px;
$space: 7.5px;
@mixin hfcommons {
width: 100%;
min-height: $hfheight;
position: fixed;
background: #1A1C22;
}
.body{ z-index: 0; background-color: #F8F8F8;}
.container{
width: 100%;
position:relative;
min-height: 400px;
background-color: #F8F8F8;
z-index:-100;
}
.header{
@include hfcommons();
top: 0;
}
.footer{
@include hfcommons();
bottom: 0;
z-index:-1000;
}
.container p{
line-height: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link href ='style.css' rel='stylesheet'></lnk>
<style type="text/css">
</style>
</head>
<body class ='body'>
<div class="header">
</div>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
<p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
</div>
<div class="footer">
<div class="container">Copyright © 2016 Your Company</div>
</div>
</body>
</html>