Thắc mắc về CSS

#1

Mình có một đoạn CSS như thế này:

/* hero section */
.hero {
    background: #000000;
    background: linear-gradient(to right, #161616, #000000);
    padding: 200px 0;
}

.hero__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    /* height có vẻ vô dụng */
    height: 90%;
    text-align: center;
    padding: 30px;
}

Mình thử thay đổi cái giá trị % của height đi nhưng không thay đổi, mọi người cho mình hỏi nên hiểu thế nào, hay do mình thử chưa đúng, cám ơn mọi người

#2

Bạn muốn đặt chiều cao cho element nào? Tất cả elements .hero phải không? Vậy thì bạn viết thuộc tính height vào .hero, lúc này .hero sẽ có chiều cao 90% của .hero__container, đồng thời bản thân .hero__container cũng phải có kích thước rõ ràng. Còn nếu thiết đặt .hero__container có chiều cao 90% thì phải có element cha bao bọc .hero__container và element cha này cũng phải có kích thước chỉ định VD: 1000px, 150px, … Bạn đang sử dụng đơn vị tương đối %, khi sử dụng đơn vị % thì cần phải có kích thước của element cha bao bọc nó là đơn vị tuyệt đối pixel.

Kích thước element con = kích thước element cha * 90%

2 Likes
#3 
    <!-- hero section -->
    <div class="hero" id="home">
        <div class="hero__container">
            <h1 class="hero__heading">Choose your <span>color</span></h1>
            <p class="hero__description">Unlimited Possibilities</p>
            <button class="main__btn"><a href="#">Explore</a></button>
        </div>
    </div>

Mình quên không gửi đoạn html này. Còn width và height tổng mình không set để mặc định theo default của trình duyệt. Còn về kích thước các thiết bị thì mình có viết @media screen để xử lý rồi.

Mình cũng nghĩ như vậy, nhưng mình thay số 90% = 1% hay 10% thì không thấy gì thay đổi

#4

Như mình đã ghi bên trên, .hero__container là element con và có kích thước tương đối %, kích thước .hero__container bị phụ thuộc vào kích thước element cha là .hero, .hero bạn chưa đặt height cố định bao nhiêu px cả nên .hero__container sẽ có height luôn luôn không thay đổi dù cho bạn đặt 1% hay 99%.

3 Likes
#5

ok, cám ơn bạn rất nhiều

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?