2015-09-14 15 views
5

Tôi đang phát triển một trang web nhỏ và tôi đang gặp một số vấn đề.Chiều cao tùy chỉnh của hàng khởi động theo tỷ lệ phần trăm

Điều tôi muốn là thay đổi kích thước div "hàng" với chiều cao cụ thể theo phần trăm. Tôi đã tìm kiếm trên SO nhưng không có gì tốt cho tôi. Đây là mã của tôi:

<body> 
    <nav class="navbar navbar-inverse navbar-static-top"> 
     ... 
    </nav> 
    <!-- END NAVBAR --> 
    <div class="container-fluid"> 
     <div class="row row-first"> 
      <img class="img img-responsive" src="public/img/bg.jpg" /> 
     </div> 
    </div> 

Lớp "hàng đầu" hiện không có quy tắc để nó không có hiệu lực. Tôi muốn div "hàng đầu tiên" là 80% chiều cao của chế độ xem, nhưng cách duy nhất để thay đổi kích thước là bằng cách đặt một số nội dung bên trong div sao cho chiều cao của div theo chiều cao nội dung. CSS của tôi:

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
} 

body { 
    font-family: 'Muli', sans-serif; 
} 

.container-fluid { 
    max-height: 100%; 
    padding-left: 0px; 
    padding-right: 0px; 
} 

.row { 
    margin-left: 0px; 
    margin-right: 0px; 
    height:80%; 
} 

.row-first { 

} 

Trả lời

6

Chiều cao của div tương ứng với chiều cao của cha mẹ. Do đó, để làm cho chiều cao của. 80%, trước tiên tôi thiết lập chiều cao của cha mẹ. Dưới đây là các css:

.container-fluid { 
    height: 100%; 
    padding-left: 0px; 
    padding-right: 0px; 
} 

.row-first { 
    height:80%; 
    overflow: hidden; 
} 

Và fiddle: http://jsfiddle.net/bmwoLkdr/

Hãy thoải mái để chơi với chiều cao và xem cho chính mình!

+0

Hi pgruber, cảm ơn bạn đã trả lời, nhưng vấn đề của tôi là tôi muốn 80% chế độ xem, tức là 80% chiều cao của trình duyệt có thể nhìn thấy. Sử dụng cách tiếp cận của bạn, tôi có thể sửa đổi chiều cao chính xác, nhưng quy tắc .container-fluid (chiều cao: 100%) cho phép chất lỏng chứa bên ngoài chiều cao khung nhìn (tức là thanh cuộn xuất hiện). –

+0

Bạn không thể chỉ định một subcontainer của '.container-fluid' và thiết lập' height: 80%; 'như trong ví dụ của mình? – UltraSonja

Các vấn đề liên quan