Ü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 (1 Mobil) - 1 Masaüstü, 1 Mobil
5 sn
15
Cevap
0
Favori
7.962
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri Yükleniyor
Konuya Özel
Öne Çıkar
0 oy
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> 
      LG <a href="https://www.donanimhaber.com/rpg" target="_blank" class="s-w-l">RPG</a> | www.lgrpg.com  
      </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.
    _____________________________
    ...Bütün bu şerâitten daha elîm ve daha vahim olmak üzere, memleketin dahilinde, iktidara sahip olanlar gaflet ve dalâlet ve hattâ hıyanet içinde bulunabilirler. Hattâ bu iktidar sahipleri, şahsî menfaatlerini, müstevlîlerin siyasi emelleriyle tevhid edebilirler. Millet, fakr ü zaruret içinde harap ve bîtap düşmüş olabilir.
    Ey Türk istikbalinin evlâdı! İşte, bu ahval ve şerâit içinde dahi vazifen, Türk istiklâl ve Cumhuriyetini kurtarmaktır! Muhtaç olduğun kudret, damarlarındaki asil kanda mevcuttur!
  • 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ı >
    _____________________________
    <a href=http://www.ondermedia.com> OnderMedia </a><br/><a href=http://www.angelsneverdie.com> AngelsNeverDie </a>
  • 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'ü.
    _____________________________
    • Yapay Zeka’dan İlgili Konular
    Windows 8.1 Single Language Key SORUNU!!!
    11 yıl önce açıldı
    Google sheet Exel Break plan eski tarih problemi
    2 yıl önce açıldı
    Twin Mirror (4.22.3.0) Türkçe Yama (v4) ~%97 [OpenAI GPT-3 Translate ]
    5 yıl önce açıldı
    Daha Fazla Göster
  • 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
    _____________________________
    CLS 63 AMG
  • yapan yok sanırım
    _____________________________
    http://www.mestwebtasarim.com/
  • <!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.
    _____________________________
    CSS and jQuery FTW!




  • 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'yi kullanırken depoladığımız çerezlerle ilgili veri politikamıza gözatın.
Kabul Ediyorum