Fixed Div Sorunu

28-01-2018, 01:30:46

Yaptığım sayfanın en üst kısmında sabit bir div olmasını istiyorum. Devamındaki içerik ise bu divin hemen altından başlasın istiyorum. üstteki sabit olacak divin yüksekliği px cinsinden olsa sorun yok ama 5% olduğu için sonraki gelen içerik sabit divin altında kalıyor. padding verdiğinizde değişik çözünürlükte çarşı karışıyor. ya sabit divin yine altında kalıp bir kısmı gözükmüyor yada çok uzağından başlıyor. bunu nasıl çözeriz?

<html> <head> <meta charset="utf-8"> <style type="text/css"> body{margin: 0; padding:0;} .tumicerik { margin: 0; width: 100%; height: 100%; } .sabitDiv{ height: 5%; width: 100%; position: fixed; background-color: #DCDCEF; } .sonrakiDiv{ width: 100%; } </style> </head> <body> <div class="tumicerik"> <div class="sabitDiv">SABİT DİV BÖLÜMÜ</div><div style="clear: both;"></div> <div class="sonrakiDiv">BU KISIM FIXED DIV ALTINDA KALIYOR 123 TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST </div> </div> </body> </html>

28-01-2018, 01:34:59

#2

Onur89TR

<html> <head> <meta charset="utf-8"> <style type="text/css"> body{margin: 0; padding:0;} .tumicerik { position: fixed; margin: 0; width: 100%; height: 100%; } .sabitDiv{ height: 5%; width: 100%; background-color: #DCDCEF; } .sonrakiDiv{ width: 100%; } </style> </head> <body> <div class="tumicerik"> <div class="sabitDiv">SABİT DİV BÖLÜMÜ</div><div style="clear: both;"></div> <div class="sonrakiDiv">BU KISIM FIXED DIV ALTINDA KALIYOR 123 TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST </div> </div> </body> </html>

İstediğin böyle bir şey mi?

28-01-2018, 01:38:48

#3

yesil60

hayır. siz sayfayı sabitlemişsiniz. istediğim üstte gözüken mor renkli divin sabit kalması.

28-01-2018, 01:49:11

#4

Onur89TR

jQuery devreye girerse olur.

<html>
<head>
<meta charset="utf-8">
<style type="text/css"> body{margin: 0; padding:0;} .tumicerik { margin: 0; width: 100%; height: 100%; } .sabitDiv{ height: 5%; width: 100%; position: fixed; background-color: #DCDCEF; } .sonrakiDiv{ width: 100%; }</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
 $(window).on("load resize",function() {
  var sabitdivyuk = $(".sabitDiv").outerHeight(true);
  $(".sonrakiDiv").css("padding-top",sabitdivyuk+"px");
 });
});
</script>
</head>
<body>
<div class="tumicerik">
<div class="sabitDiv">SABİT DİV BÖLÜMÜ</div>
<div style="clear: both;"></div>
<div class="sonrakiDiv">BU KISIM FIXED DIV ALTINDA KALIYOR 123 TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST </div>
</div>
</body>
</html>

28-01-2018, 02:05:20

#5

yesil60

teşekkür ederim çalıştı bu şekilde.