Css height 100% sorunu

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

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.