Kodları lütfen aşağıdaki butonları kullanarak renklendirin. Örnek: <php> echo "Selam Dünya"; </php>
Yardım
karakter kaldı

csste sol ve sağ contentin aynı boyda olması

html kicktstart css'in grid yapısında col_2 ve col_10 olarak iki divim var ve bunların hangisi aşağıya doğru uzarsa ikisinin de aynı boyda olmasını istiyorum. html kickstart css'ini bilmeyenler için durum şöyle


#content
{
    margin: 0px;
    background-color:black;
    height:100%;
}


#leftcontent
{
    float:left;
    width:20%;
    margin: 0px;
    background-color: orange;
    height:100%;
}


#rightcontent
{
    float:left;
    width:80%;
    margin: 0px;
    background-color:black;
    height:100%;
}


<div id="content">
    <div id="left_content"></div>
    <div id="right_content"></div>
</div>
+0
-0
Cevaba KatılıyorumKatılmıyorum
Cevap Yaz Yorum Yaz Arşivime Ekle Takip Et

Doğru Cevap

  • huseyiniskender adlı üyenin fotoğrafı
    10 yıl önce yazılmış
    47 cevap - 20 soru
    Css'in yanında jquery'den de yararlandım. İşine yarar umarım.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="-Type" ="text/html; charset=iso-8859-9" />
    <title>Örnek</title>
    <style type="text/css" media="screen">
    html,body,#content{height:100%;}
    body > #content{height:auto;min-height:100%;}
    body{margin:0px; padding:0px;}
    #content{ float:left; display:inline; margin:0px; width:100%; background-color:black;}
    #left{ float:left; display:inline; margin:0px; width:20%; height:100%; background-color:orange;}
    #right{ float:left; display:inline; margin:0px; width:80%; height:100%; background-color:yellow;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type='text/javascript'>
    $(document).ready(function() {
    $("#left").height($("#content").height());
    $("#right").height($("#content").height());
    });
    </script>
    </head>
    <body>
    
    <div id="content">
        <div id="left"></div>
        <div id="right"></div>
    </div>
    
    </body>
    

    </html>
    • gungnir89 adlı üyenin fotoğrafı gungnir89
      teşekkürler bu önayak olarak buna benzer bir yolla çözüme ulaştım sayılır
      10 yıl önce yazılmış

Cevaplar

  • BQRA adlı üyenin fotoğrafı
    10 yıl önce yazılmış
    27 cevap - 2 soru
    su an bahsettigin gibi degil mi zaten bu kodlarla.
    • gungnir89 adlı üyenin fotoğrafı gungnir89
      yok işte olmadı ben de şaşkınım fazla da zaman harcamayım dedim burdan iki dakkada çözerler:)
      10 yıl önce yazılmış
  • xuma adlı üyenin fotoğrafı
    10 yıl önce yazılmış
    171 cevap - 1 soru
    Sadece css kullunarak yapacaksan buna holy grail diyorlar ve nispeten daha karışık bir yöntem izleniyor.

    İlgili örneklere http://www.alistapart.com/articles/holygrail/ ve http://almirante.users.sourceforge.net/2-column-css-layout.htm burdan ulaşabilirsin ve http://matthewjamestaylor.com/blog/fixed-width-or-liquid-layout.htm
    • gungnir89 adlı üyenin fotoğrafı gungnir89
      teşekkürler bu biraz daha karışık geldi. daha sonra inceleyeceğim işime yarayacağı kesin
      10 yıl önce yazılmış
  • ontedi adlı üyenin fotoğrafı
    10 yıl önce yazılmış
    39 cevap - 2 soru
    $(document).ready(function() {
    var intSol = $("#left").height();
    var intSag = $("#right").height();
    if (intSol >= intSag)
    {
    $("#right").css({"height":"" + intSol + "px"})
    }
    else
    {
    $("#left").css({"height":"" + intSag + "px"})
    }
    });

    Buna benzer bir şey olabilir. Denemedim fakat.