Css height 100% sorunu

E

Eyvallah

14 yıl (21535 mesaj)

Yarbay

Dostum maalesef ben CSS bilmiyorum.

T

Tumble

14 yıl (9015 mesaj)

Yarbay

Konu Sahibi

Kendimi tasarım konusunda geliştirmek için öylesine bir şeyler kodluyordum.Yüksekliği 100% yapıyorum sayfa boyunca uzamıyor.Nerede hata yapıyorum çözemedim? Yardım.

< Resime gitmek için tıklayın >

<!DOCTYPE html> 
  <html> 
  <head> 
  <title>LG RPG | www.lgrpg.com </title> 
  </head> 
  <style type="text/css"> 
  body {background-color:#f1f1f1; margin:0px; padding:0px; height:100%;} 
  @font-face { 
    font-family: 'Yanone Kaffeesatz'; 
    src: local('Yanone Kaffeesatz Regular'), local('YanoneKaffeesatz-Regular'), url('http://themes.googleusercontent.com/static/fonts/yanonekaffeesatz/v3/YDAoLskQQ5MOAgvHUQCcLRTHiN2BPBirwIkMLKUspj4.woff') format('woff');} 
   
  #kapsul { margin-left:auto; margin-right:auto; position:relative; width:800px; background-color:#fff; padding:0px; border-left:3px solid #fff; border-right:3px solid #fff; min-height:100%; } 
  #header {padding:10px; font-family:Yanone Kaffeesatz; font-size:30px;} 
  ul#menu {list-style-type:none;  padding:10px; font-family:georgia; font-size:20px; color:#000;} 
  .ullimenu {display:inline;} 
  #kapsul a:link {text-decoration:none; color:#000;} 
  #kapsul a:visited {text-decoration:none; color:#000;} 
  #kapsul a:hover {color:red;} 
   
  </style> 
  <body> 
  <div id="kapsul"><div id="header"><center>[ LG RPG | www.lgrpg.com ]</center></div> 
  <center> 
   
  <ul id="menu"> 
  <li class="ullimenu"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=58810858&url=#" data-href="#">Anasayfa </a> |</li> 
  <li class="ullimenu"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=58810858&url=#" data-href="#">Hakkımızda </a> |</li> 
  <li class="ullimenu"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=58810858&url=#" data-href="#">Karakter Başvurusu </a> |</li> 
  <li class="ullimenu"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=58810858&url=#" data-href="#">Forum</a></li> 
  </ul> 
  </center> 
  </div> 
   
   
   
   
   
   
  </body> 
   
  </html>

DH forumlarında vakit geçirmekten keyif alıyor gibisin ancak giriş yapmadığını görüyoruz.

Üye olduğunda özel mesaj gönderebilir, beğendiğin konuları favorilerine ekleyip takibe alabilir ve daha önce gezdiğin konulara hızlıca erişebilirsin.

Üye Ol Şimdi Değil

Bir Daha Gösterme

< Bu mesaj bu kişi tarafından değiştirildi Tumble -- 17 Mart 2012; 20:22:56 >

W

wilcomme

14 yıl (363 mesaj)

Teğmen

Telefondan gordugum kadariyla sadece menuyu yapmissin ve height %100 yapinca satır kadar uzatir yani suan 4 satir varsa sadece 4 satiri uzatir altina satir eklersen ekledigin kadar uzar, bir dene mesela bir kutu ekle sonucu goreceksin

< Bu ileti mobil sürüm kullanılarak atıldı > Bu mesaja 1 cevap geldi.

T

Tumble

14 yıl (9015 mesaj)

Yarbay

Konu Sahibi

quote:

Orijinalden alıntı: wilcomme

Telefondan gordugum kadariyla sadece menuyu yapmissin ve height %100 yapinca satır kadar uzatir yani suan 4 satir varsa sadece 4 satiri uzatir altina satir eklersen ekledigin kadar uzar, bir dene mesela bir kutu ekle sonucu goreceksin

Zaten yüksekliği 100 yapmayınca da eklediğin satır kadar uzuyor.Ben direkt satır eklemeden sayfa boyunca uzamasını istiyorum.

Bu mesaja 1 cevap geldi.

R

Relative Minors

14 yıl (4487 mesaj)

Binbaşı

position: absolute;

yap

Bu mesaja 1 cevap geldi.

T

Tumble

14 yıl (9015 mesaj)

Yarbay

Konu Sahibi

quote:

Orijinalden alıntı: gokhanbey

position: absolute;

yap

Düşünmedim değil ama ortalama konusunda sıkıntı yapar. Absolute yapınca nasıl ortalayabilirim içeriği??

Bu mesaja 1 cevap geldi.

R

Relative Minors

14 yıl (4487 mesaj)

Binbaşı

absolute divlerde en dışa taşıcıyı bi div açıp position relative verip sitenin içerik genişliğinin yarısı kadar margin left verip ortalayabiliyoruz ama sen dikey olarak %100 vermek istiyorsun taşıyıcı div oluşturduğumuzda bloke ediyor height %100'ü.

Bu mesaja 1 cevap geldi.

T

Tumble

14 yıl (9015 mesaj)

Yarbay

Konu Sahibi

quote:

Orijinalden alıntı: gokhanbey

absolute divlerde en dışa taşıcıyı bi div açıp position relative verip sitenin içerik genişliğinin yarısı kadar margin left verip ortalayabiliyoruz ama sen dikey olarak %100 vermek istiyorsun taşıyıcı div oluşturduğumuzda bloke ediyor height %100'ü.

Görüyorum ben bazı sitelerde (özellikle bloglarda) yazı küçük gelirse ve sayfayı kaplayamasa bile div kaplıyordu sayfayı.

Yardım

Bu mesaja 1 cevap geldi.

R

Relative Minors

14 yıl (4487 mesaj)

Binbaşı

istediğin şey dikey olarak uzatmaksa <br> atarakda bunu basit bi şekilde yapabilirsin ya da ben mi yanlış anladım

Bu mesaja 1 cevap geldi.

R

resitgalip

14 yıl (51 mesaj)

Çavuş

100% değilde minimum yükseklik vermen daha mantıklı bence
zaten %100 farklı tarayıcılarda problem çıkaracaktır.

eğer illaki yapmam gerekiyor diyosan bunu kullan

<html>
<head>
<title></title>
</head>
<body>

<div style="height:100%;background:#ff6600; padding:10px">
<div style="height:100%; background:#336699">

<ul id="menu">
<li class="ullimenu"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=58883876&url=#" data-href="#">Anasayfa </a> |</li>
<li class="ullimenu"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=58883876&url=#" data-href="#">Hakkımızda </a> |</li>
<li class="ullimenu"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=58883876&url=#" data-href="#">Karakter Başvurusu </a> |

</li>
<li class="ullimenu"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=58883876&url=#" data-href="#">Forum</a></li>
</ul>
</center>
</div>

</div>
</div>

<body>
</html>

Bu mesaja 1 cevap geldi.

G

GaBaaR

14 yıl (238 mesaj)

Teğmen

float:left; dene istersen

Bu mesaja 1 cevap geldi.

İ

ismailix

12 yıl (906 mesaj)

Yüzbaşı

yapan yok sanırım

U

umurbem

12 yıl (2 mesaj)

Er

<!DOCTYPE html>
<html style='height:100%'>
<head>
<title>LG RPG |www.lgrpg.com </title>
</head>
<style type="text/css">
body {background-color:#f1f1f1; margin:0px; padding:0px; height:100%;}
@font-face {
font-family: 'Yanone Kaffeesatz';
src: local('Yanone Kaffeesatz Regular'), local('YanoneKaffeesatz-Regular'), url('http://themes.googleusercontent.com/static/fonts/yanonekaffeesatz/v3/YDAoLskQQ5MOAgvHUQCcLRTHiN2BPBirwIkMLKUspj4.woff') format('woff');}

#kapsul { margin-left:auto; margin-right:auto; position:relative; width:800px; background-color:#fff; padding:0px; border-left:3px solid #fff; border-right:3px solid #fff; min-height:100%; }
#header {padding:10px; font-family:Yanone Kaffeesatz; font-size:30px;}
ul#menu {list-style-type:none; padding:10px; font-family:georgia; font-size:20px; color:#000;}
.ullimenu {display:inline;}
#kapsul a:link {text-decoration:none; color:#000;}
#kapsul a:visited {text-decoration:none; color:#000;}
#kapsul a:hover {color:red;}

</style>
<body>
<div id="kapsul"><div id="header"><center>[ LG RPG |www.lgrpg.com ]</center></div>
<center>

<ul id="menu">
<li class="ullimenu"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=86239437&url=#" data-href="#">Anasayfa </a> |</li>
<li class="ullimenu"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=86239437&url=#" data-href="#">Hakkımızda </a> |</li>
<li class="ullimenu"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=86239437&url=#" data-href="#">Karakter Başvurusu </a> |</li>
<li class="ullimenu"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=86239437&url=#" data-href="#">Forum</a></li>
</ul>
</center>
</div>

Bu şekilde yapabilirsin.

</body>

</html>

Bu mesajda bahsedilenler: @Heptagon

E

erhanaky

12 yıl (82 mesaj)

Çavuş

quote:

Orijinalden alıntı: Heptagon

Kendimi tasarım konusunda geliştirmek için öylesine bir şeyler kodluyordum.Yüksekliği 100% yapıyorum sayfa boyunca uzamıyor.Nerede hata yapıyorum çözemedim? Yardım.

< Resime gitmek için tıklayın >

<!DOCTYPE html> 
  <html> 
  <head> 
  <title>LG RPG | www.lgrpg.com </title> 
  </head> 
  <style type="text/css"> 
  body {background-color:#f1f1f1; margin:0px; padding:0px; height:100%;} 
  @font-face { 
    font-family: 'Yanone Kaffeesatz'; 
    src: local('Yanone Kaffeesatz Regular'), local('YanoneKaffeesatz-Regular'), url('http://themes.googleusercontent.com/static/fonts/yanonekaffeesatz/v3/YDAoLskQQ5MOAgvHUQCcLRTHiN2BPBirwIkMLKUspj4.woff') format('woff');} 
   
  #kapsul { margin-left:auto; margin-right:auto; position:relative; width:800px; background-color:#fff; padding:0px; border-left:3px solid #fff; border-right:3px solid #fff; min-height:100%; } 
  #header {padding:10px; font-family:Yanone Kaffeesatz; font-size:30px;} 
  ul#menu {list-style-type:none;  padding:10px; font-family:georgia; font-size:20px; color:#000;} 
  .ullimenu {display:inline;} 
  #kapsul a:link {text-decoration:none; color:#000;} 
  #kapsul a:visited {text-decoration:none; color:#000;} 
  #kapsul a:hover {color:red;} 
   
  </style> 
  <body> 
  <div id="kapsul"><div id="header"><center>[ LG RPG | www.lgrpg.com ]</center></div> 
  <center> 
   
  <ul id="menu"> 
  <li class="ullimenu"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=86964513&url=#" data-href="#">Anasayfa </a> |</li> 
  <li class="ullimenu"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=86964513&url=#" data-href="#">Hakkımızda </a> |</li> 
  <li class="ullimenu"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=86964513&url=#" data-href="#">Karakter Başvurusu </a> |</li> 
  <li class="ullimenu"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=86964513&url=#" data-href="#">Forum</a></li> 
  </ul> 
  </center> 
  </div> 
   
   
   
   
   
   
  </body> 
   
  </html>

İçerik olarak kullanacağın ve sayfayı kaplamasını istediğin div için, önce html yapısında en dışında kalan taglere müdahale etmen gerekir. "html , body{height:100%}" daha sonra sayfanın tamamını kaplamasını istediğin div için herhangi bir position değeri verip ".test{position:relative; height:100%}" açılacak divin sayfanın tamamını kaplamasını sağlayabilirsin. Hatta istersen bunu jQuery ile birleştirip, bu açılış efektini fade edecek şekilde animasyonlu bile yapabilirsin.

P

plugins

3 yıl (3 mesaj)

Er

Uzun süre geçmiş ama cevaplanmamış :) min-height: 500px; vererek uzatabilirsin. Örneğin İçerik girdiğin haber sayfasında içeriğin çok kısa olsa da footer'ın gözükmemesini istiyorsan, içeriğin alanına min-height css'ini verirsen içerik yazın kısa da olsa alt alan beyaz olarak gözükecektir.

Daha yararlı hali ise min-height: 100vh; olacaktır. vh = Viewport Height, yani ekran boyutu, dikeyde görünen alan kadar yer kaplar.

İyi forumlar.