tasarımın sayfanın hep 100% kaplaması

03.03.2018 20:24

msyysm WM Aracı Kullanıcı

Üyelik 03.03.2018
Yaş/Cinsiyet 28 / E
Meslek öğrenci
Konum Bursa

Ad Soyad M** Y**
Mesajlar 48
Beğeniler 29 / 2
Ticaret 0, (%0)







    

    

    

    

    Document







    üst bölüm

    sol bölüm içeirği

    sag bolum içeirği

    

    alt bölüm içerği



* {padding: 0px; margin: 0px;}

.tasiyici {width: 100%; height:100%; margin: auto; border: 1px solid #ccc;}

.ustbolum { height: 10%; width: 100%; border-bottom: 1px solid #ccc;  background: #fafaaf;}

.solbolum {  height: 80%; float: left; width: 30%;  background: #c42b2b; border-right: 1px solid #ccc;} 

.sagbolum {  height: 80 %;float: right; width: 69%;  background: #f5f5f5;}

.altbolum {height: 10%; border: 1px solid #ccc; background: #fafafa;}

.clear {clear: both;}

yapmak istediğim tasarımın sayfanın hep 100% kaplaması ama olmuyor ? ustbolum ve altbolum sayfanın height'înın 10% veriyorum ama hala daha çok küçük kalıyorlar. solbolum ve sag bolum ise gözüme biraz küçük geldi. yardım eder misiniz ?
şimdiden sağ olun.

edit : iki tane height yazmışım yanlışlıkla ve de onlardan birini silince de sayfa ufacık kaldı ama ben ekran ekrana değişmeyecek tasarım istiyorum ve bu yüzden height 'ını % olarak vermem gerekiyor

04.03.2018 11:10

#2

mapacarta HTML5/Flash Developer Kullanıcı

Üyelik 03.01.2013
Yaş/Cinsiyet 35 / E
Meslek HTML5/Flash Developer
Konum İstanbul Anadolu

Ad Soyad Ö** G**
Mesajlar 32
Beğeniler 3 / 10
Ticaret 0, (%0)

height:100% istediğin etkiyi yapmaz. height: 100vh kullanman gerekiyor. İstediğin şöyle bir şey sanırım:

* {

    padding: 0px;

     margin: 0px;

     box-sizing: border-box;

}

 body{

     overflow: hidden;

}

 .tasiyici {

     width: 100%;

     height:100vh;

     margin: auto;

     border: 1px solid #ccc;

}

 .ustbolum {

     height: 10%;

     width: 100%;

     border-bottom: 1px solid #ccc;

     background: #fafaaf;

}

 .solbolum {

     height: 80%;

     float: left;

     width: 30%;

     background: #c42b2b;

     border-right: 1px solid #ccc;

}

 .sagbolum {

     white-space: nowrap;

     height: 80%;

    float: right;

     width: 70%;

     background: #f5f5f5;

}

 .altbolum {

    height: 10%;

     border: 1px solid #ccc;

     background: #fafafa;

}

 .clear {

    clear: both;

}

1 kişi bu mesajı beğendi.

04.03.2018 13:20

#3

msyysm WM Aracı Kullanıcı

Üyelik 03.03.2018
Yaş/Cinsiyet 28 / E
Meslek öğrenci
Konum Bursa

Ad Soyad M** Y**
Mesajlar 48
Beğeniler 29 / 2
Ticaret 0, (%0)

çok sağ ol ama yine de tam olarak istediğim değil ben sayfanın alt kısmınında da ekran gözükmesi istiyorum ama altbolum'ü görmek için fareyi kaydırmak zorunda kalıyorum şuan benim istediğim tam olarak şöyle :

yani sayfanın tamamı %100 şeklinde kaplayacak ama scrollbar olmayacak

04.03.2018 19:51

#4

mapacarta HTML5/Flash Developer Kullanıcı

Üyelik 03.01.2013
Yaş/Cinsiyet 35 / E
Meslek HTML5/Flash Developer
Konum İstanbul Anadolu

Ad Soyad Ö** G**
Mesajlar 32
Beğeniler 3 / 10
Ticaret 0, (%0)

Yukarıdaki css'yi kullandığında scrollbar gözükmez zaten; overflow:hidden kullanıyor.

Gönderdiğim css koduyla denediğimde bende tam ekran olarak kaydırma çubuğu olmadan çalışıyor.

1 kişi bu mesajı beğendi.

04.03.2018 21:04

#5

msyysm WM Aracı Kullanıcı

Üyelik 03.03.2018
Yaş/Cinsiyet 28 / E
Meslek öğrenci
Konum Bursa

Ad Soyad M** Y**
Mesajlar 48
Beğeniler 29 / 2
Ticaret 0, (%0)

sorun çözüldü, teşekkürler

tasarımın sayfanın hep 100% kaplaması

Üye Girişi Yap