0
Kayıt Ol

CSS ile bir Div etiketini minimum bir yükseklik değeri atamak

6

●

130

  • 01-06-2023, 02:14:05
    #1
    rufiqcavadov
    rufiqcavadov
    Merhaba. Örnek bu resime bakarken ne demek istediğimi anlayacaksınız. Mesela container diye bir div oluşturdum diyelim ve bu div içerisinde de main adında ana bir div etiketimin olduğunu hayal edelim. Bu container için işte nedir margin: 0 auto; width: 95%; verdim diyelim. Ana divim olan main de öyle birşey yapmak istiyorum ki, her cihazda bir yükseklik değeri alsın her PC üzerinden aşağıdan yukarıdan soldan sağdan da bir boşluk olsun. Yani bunu aslında body etiketine padding: 2rem vererek de hall edebilirim ama tam yükseklik değeri istediğim gibi olmuyor.

    Umarım ne demek istediğimi anlatabilmişimdir.

    <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="main">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Non odio aperiam id asperiores quaerat nobis dolore adipisci repellat, quia expedita modi repudiandae animi cumque at amet harum quam nam. Tenetur!
        </div>
    </div>
</body>
</html>
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: #c9c9c9;
}
.container {
    width: 95%;
    margin: 0 auto;
}
.main {
    min-height: 50%;
    background: #dfdfdf;
}
    Mesela burada arkaplanı yani şu renk koduna sahip olan kısımdan bahsediyorum #464955 burayı body olarak düşünün. Kenar boşlukları da neredeyse 12rem olarak düşünebilirsiniz.

  • Kabul Edilen Cevap
    • rws
      0 Beğeni
      Mesaja Git
      min-height : calc(100% - 100px);
      calc kullanabilirsiniz
  • 01-06-2023, 02:20:42
    #2
    mespirik
    mespirik
    margin: 20px 10px 20px 10px;

    şundan bahsediyorsunuz sanırım.

    üst sağ alt sol
  • 01-06-2023, 02:26:31
    #3
    Lusy
    Lusy
    padding-top, padding-bottom, margin-top ve margin-bottom denediniz mi ?
  • 01-06-2023, 02:42:36
    #4
    rufiqcavadov
    rufiqcavadov
    @mespirik; ve @Lusy; hocam. Kesinlikle hayır. Bu boşlukları biliyorum aslında. Benim demek istediğim bu ortada beyaz olan ana kapsayıcıyı nasıl yapmış mesela width demiyorum height sanki standart bir height gibi duruyor anlatabiliyor muyum?

    max-height, min-height sanki 50% kaplıyor gibi gözükmekte sayfada. 50vh, 50% gibin nasıl desem bilemiyorum ki, Size. Sanki dediğim gibi standart bir yükseklik gibi gözüküyor her cihaz için orada.
  • 01-06-2023, 02:56:35
    #5
    Bu cevap, konu sahibi tarafından kabul edilebilir bir cevap olarak işaretlendi.
    rws
    rws
    min-height : calc(100% - 100px);
    calc kullanabilirsiniz
  • 01-06-2023, 03:01:50
    #6
    rufiqcavadov
    rufiqcavadov
    rws adlı üyeden alıntı: mesajı görüntüle
    min-height : calc(100% - 100px);
    calc kullanabilirsiniz
    Teşekkürler!

    .main-content {
    width: 100%;
    padding: 2rem;
    background: #dfdfdf;
    overflow-y: auto;
    height: calc(100vh - 100px);
}
    Sonuç:

  • 01-06-2023, 13:04:57
    #7
    rws
    rws
    rufiqcavadov adlı üyeden alıntı: mesajı görüntüle
    Teşekkürler!

    .main-content {
    width: 100%;
    padding: 2rem;
    background: #dfdfdf;
    overflow-y: auto;
    height: calc(100vh - 100px);
}
    Sonuç:

    padding: 2rem; ise
    height: calc(100vh - 4rem) olmalı