DonanımHaber Mini sürüm 2 Ocak 2026 tarihi itibariyle kullanımdan kalkacaktır. Bunun yerine daha hızlı bir deneyim için DH Android veya DH iOS uygulamalarını kullanabilirsiniz.
Arama butonu
Bu konudaki kullanıcılar: 1 misafir
14
Cevap
7962
Tıklama
0
Öne Çıkarma
Css height 100% sorunu
T
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>





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

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



DH Mobil uygulaması ile devam edin. Mobil tarayıcınız ile mümkün olanların yanı sıra, birçok yeni ve faydalı özelliğe erişin. Gizle ve güncelleme çıkana kadar tekrar gösterme.