Otomatik div yüksekliği

MehGokalp

Hectopat
Katılım
16 Eylül 2014
Mesajlar
86
Daha fazla  
Cinsiyet
Erkek
Merhaba arkadaşlar, sizlerden otomatik div yükseliği konusunda yardım almak istiyorum. Sorunum şu ki;
R67vmn.png

Menü'nün içerik kısmı ile birlikte büyümesini istiyorum. Denemediğim yol kalmadı fakat çözüme ulaşamadım yardımcı olursanız sevinirim..

html:
HTML:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <link href="css/stil.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <div id="site">
            <div id="header">
                <p id="title">BAŞLIK</p>
            </div>
            <div id="menu">
                <p class="paragraf">MENÜ</p>
            </div>
            <div id="content">
                <p id="paragraf">
                    Video, size görüşünüzü kanıtlamak için güçlü bir yol sunar. Çevrimiçi Video'yu tıklattığınızda, eklemek istediğiniz videoya ait ekleme kodunu yapıştırabilirsiniz. Belgenize en iyi uyan videoyu çevrimiçi olarak aramak için bir anahtar sözcük de yazabilirsiniz.
                    Word, belgenizin profesyonelce üretilmiş görünmesini sağlamak için birbirini tamamlayan üstbilgi, altbilgi, kapak sayfası ve metin kutusu tasarımları sağlar. Örneğin, birbiriyle uyumlu bir kapak sayfası, başlık ve kenar çubuğu ekleyebilirsiniz. Ekle'yi tıklatın ve ardından farklı galerilerden eklemek istediğiniz öğeleri seçin.
                    Temalar ve stiller de belgenizin düzenli kalmasına yardımcı olur. Tasarım'ı tıklatıp yeni bir Tema seçtiğinizde, resimler, grafikler ve SmartArt grafikleri, yeni temanızla eşleşecek şekilde değiştirilir. Stilleri uyguladığınızda, başlıklarınız yeni tema ile eşleşecek şekilde değiştirilir.
                    Word'de ihtiyaç duyduğunuz yerlerde görüntülenen yeni düğmeler sayesinde zaman kazanın. Bir resmin belgenize sığma şeklini değiştirmek için resmi tıklatın. Resmin yanında bir düzen seçenekleri düğmesi belirir. Bir tablo üzerinde çalışırken, bir satır veya sütun eklemek istediğiniz yeri tıklatın ve ardından artı işaretini tıklatın.
                    Yeni Okuma görünümünde okumak da daha kolaydır. Belgenin bölümlerini daraltabilir ve istediğiniz metne odaklanabilirsiniz. Sona ulaşmadan önce okumayı durdurmanız gerekirse, Word farklı bir aygıtta bile kaldığınız yeri hatırlar.
                </p>
            </div>
            <div style="clear:both;"></div>
            <div id="footer">
                <p class="paragraf">ALT BAŞLIK</p>
            </div>
        </div>
    </body>
</html>

Css:
HTML:
*{
    margin:0px;
    padding:0px;
}
#site{
    border:1px solid;
    margin:0px auto;
    width:800px;
    padding:5px;
}
#header{
    height:50px;
    background:red;
    /* background:url("rsm/fon.png"); 0 0*/
    margin-bottom:5px;
}
#menu{
    width:100px;
    background:blue;
    float:left;
    margin-bottom:5px;
}
#content{
    background:yellow;
    padding:5px;
    float:left;
    width:685px;
    margin-left:5px;
    margin-bottom:5px;
}
#footer{
    height:50px;
    background:green;
    /* background:url("rsm/fon.png"); 0 -200*/
}
#title{
    font:bold 20pt/50px verdana;
    text-align:center;
    color:white;
}
.paragraf{
    font:italic 12pt verdana;
    text-align:center;
}
#paragraf{
    font:italic 12pt verdana;
    text-align:justify;
}

İyi Günler.
 
HTML'de
"<div id="menu">" kodunun üzerine "<div class="orta">" ekle daha sonra "<div style="clear:both;"></div>" altına "</div>" ekleyerek açmış olduğun orta class'a sahip div'i kapat.

CSS'de

".orta { background-color:blue; margin-bottom:5px;}" ekle, "#menu" ve "#content" den "margin-bottom:5px;" kodunu sil

Screenshot_3.jpg
 
Şöyle bir yöntem daha var orjinal halinde hiç birşey bozmadan;

Öncelikle sayfana jQuery ekle (<head> ile </head> arasına)
Kod:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

Daha sonra aşağıdaki kodu </head> ile <body> arasına ekle
Kod:
<script type="text/javascript">
    $(document).ready(function(){
    $("#menu").height( $("#content").height()+10 );
    });
</script>

Bu kod sayfa yüklendiğinde(açıldığında) senin #content div'in yüksekliğini #menu div'in yüksekliği olarak ayarlıyor. Sen CSS'de 5px üst, 5px alttan margin verdiğin için de +10 yükseklik daha ekliyerek aynı hizaya gelmesini sağlıyoruz.

Screenshot_1.png


Ama bu yöntem de içerik menü içeriğinden az olursa menü içerisinde bulunan yazılar div'in dışına çıkacaktır. onun içinde farklı önlemler almalısınız ama genelde içerik menü den fazla olacağı için sıkıntı yaşamazsınız.

Screenshot_2.png


Önlem olarak ta CSS'de #content'e min-height eklerseniz içerisi boş olsa bile sizin belirlediğiniz yükseklikte sabit kalacaktır içeriği artarsa da yüksekliği artacaktır.

Screenshot_3.png
 
Son düzenleme:
Yüzde ile belirt sorunun çözülür

HTML:
<div style="height:100%; width:30%"> </div>

Bu işlem malesef bu şekilde çalışmayacaktır. Denerseniz görebilirsiniz.

Çalışması için bazı değişiklikler yapması gerekmekte.

Öncelikle "menu" ve "content" divlerini içerisine alan bir taşıyıcı div oluşturmalı daha sonra bu taşıyıcı div'e "position:relative" vermeli, "menu" ve "content" divlerinin CSS kaydına geçip "margin-bottom" girişlerini silmeli, "menu" CSS kodlarına "height:100%;" ve "position:absolute;" eklemeli daha sonra "footer" CSS kodlarına "margin-top:5px;" eklerse mevcut yapısına döner

Son bir not unutmuşum content'in "float" değerini "right" yapmalı :)
 
Son düzenleme:
Uyarı! Bu konu 10 yıl önce açıldı.
Muhtemelen daha fazla tartışma gerekli değildir ki bu durumda yeni bir konu başlatmayı öneririz. Eğer yine de cevabınızın gerekli olduğunu düşünüyorsanız buna rağmen cevap verebilirsiniz.

Geri
Yukarı