Üye Girişi
Bağlan Google+ ile Bağlan Facebook ile Bağlan
Yeni Kayıt
Tüm Forumlar
  • Tüm Forumlar
  • Web Tasarım - Programlama
  • Tasarım ve grafik
  • Web Tasarım ve Hazır Kodlar
  • Bu Konuda
Şimdi Ara

Css height 100% sorunu

Sıcak Fırsatlarda Tıklananlar
Editörün Seçtiği Fırsatlar
Bu Konudaki Kullanıcılar:
2 Misafir - 2 Masaüstü
5 sn
15
Cevap
0
Favori
7.820
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri Yükleniyor
Konuya Özel
0 oy
Öne Çıkar
Cevapla
Sayfa: 1
Giriş
Mesaj
  • 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.

    Css height 100% sorunu 

    <!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>



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







  • Dostum maalesef ben CSS bilmiyorum.
  • 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ı >
  • 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.
  • position: absolute;

    yap
  • 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??
  • 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'ü.
  • 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
  • istediğin şey dikey olarak uzatmaksa <br> atarakda bunu basit bi şekilde yapabilirsin ya da ben mi yanlış anladım
  • 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>




  • float:left; dene istersen
  • yapan yok sanırım
  • <!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>




  • 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.

    Css height 100% sorunu 

    <!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.




  • 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.
    • 
Sayfa: 1

Benzer içerikler

- x
Bildirim
mesajınız kopyalandı (ctrl+v) yapıştırmak istediğiniz yere yapıştırabilirsiniz.
Hizmet kalitesi için çerezleri kullanabiliriz. DH’ye girerek kullanım izni vermiş sayılırsınız.
Anladım Veri Politikamız