CSS yüksekliği 100% Nasıl Ayarlanır?

yone1108 · 28 Ocak 2023

Arkadaşlar siteyi ikiye ayırdım. Sidebar ve main kısmı olarak sidebar alanını sola yasladım. Yüksekliğinin 100% olmasını istiyorum ancak gördüğünüz gibi içeriği kadar yükseklik alıyor.
HTML, body etiketlerime 100% yükseklik verdim ama bir işe yaramadı.

EFECETINKAYAYIM · 28 Ocak 2023

yone1108 dedi:
Arkadaşlar siteyi ikiye ayırdım. Sidebar ve main kısmı olarak sidebar alanını sola yasladım. Yüksekliğinin 100% olmasını istiyorum ancak gördüğünüz gibi içeriği kadar yükseklik alıyor.
HTML, body etiketlerime 100% yükseklik verdim ama bir işe yaramadı.

Eki Görüntüle 1648251

CSS'den heighti ayarla.

yone1108 · 28 Ocak 2023

EFECETINKAYAYIM dedi:
CSS'den heighti ayarla.

height 100% verdim ancak yine olmadı.

M(i)usa · 28 Ocak 2023

yone1108 dedi:
Arkadaşlar siteyi ikiye ayırdım. Sidebar ve main kısmı olarak sidebar alanını sola yasladım. Yüksekliğinin 100% olmasını istiyorum ancak gördüğünüz gibi içeriği kadar yükseklik alıyor.
HTML, body etiketlerime 100% yükseklik verdim ama bir işe yaramadı.

Eki Görüntüle 1648251

Sidebar'ı div içine al.

CSS:

        .sidebar {
            height: 100%;
            width: 160px;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: #111;
            overflow-x: hidden;
            padding-top: 16px;
        }

Bu kodları style etiketi içine yazdıktan sonra div'in sınıfını sidebar belirle.

die · 28 Ocak 2023

Demek istediğiniz, sidebar'ın ekranın sonuna kadar uzaması mı?

Kxaan · 28 Ocak 2023

CSS:

height: 100vh;
width: 100vw;

Yüzde olarak değil böyle ver ana dive. Böylece ekranın tamamını kaplar

nyksgod · 28 Ocak 2023

yone1108 dedi:
Arkadaşlar siteyi ikiye ayırdım. Sidebar ve main kısmı olarak sidebar alanını sola yasladım. Yüksekliğinin 100% olmasını istiyorum ancak gördüğünüz gibi içeriği kadar yükseklik alıyor.
HTML, body etiketlerime 100% yükseklik verdim ama bir işe yaramadı.

Eki Görüntüle 1648251

Merhabalar, sidebar kısmına şunları yazarak istediğiniz sonuca ulaşabilirsiniz

CSS:

position:fixed;
height:100vh;

Lakin bunu yaptığınızda main content, sidebar'ı görmez bunun için main dive sidebar'ın genişliği kadar margin vermeniz gerek.

CSS:

margin-left: "sidebar'ın genişliği";

Ayrıca şunu söyleyeyim yüksekliği tanımlanmamış bir şeyin yüksekliğini 100% yapamazsınız. Mesela 500px 500px bir kare düşünelim bunun yüksekliği ve genişliği tanımlanmıştır bu karenin içine eklediğiniz başka bir karenin yüksekliğini ve genişliğini yüzdelik bakımından ayarlayabilirsiniz. Diğer türlü sadece genişliği ayarlayabilirsiniz.

CSS yüksekliği 100% Nasıl Ayarlanır?

Ayrıntılı düzenleme

yone1108

Decapat

EFECETINKAYAYIM

Decapat

yone1108

Decapat

M(i)usa

Kilopat

die

Hectopat

Kxaan

Kilopat

nyksgod

Femtopat

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz