Tỷ lệ phần trăm chiều cao HTML 5 / CSS

176

Tôi đang cố gắng thiết lập một <div>chiều cao phần trăm nhất định trong CSS, nhưng nó vẫn giữ nguyên kích thước với nội dung bên trong nó. <!DOCTYTPE html>Tuy nhiên, khi tôi xóa HTML 5 , nó vẫn hoạt động, <div>chiếm toàn bộ trang như mong muốn. Tôi muốn trang xác thực, vậy tôi phải làm sao?

Tôi có CSS này trên <div>, có ID page:

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}

html css height

— D. Sải bước
nguồn

3

Đây là một lời giải thích đơn giản và rõ ràng về thuộc tính CSS heightvới các giá trị tỷ lệ phần trăm: stackoverflow.com/a/31728799/3597276

— Michael Benjamin

giải quyết vấn đề DOCTYPE: stackoverflow.com/a/32215263/3597276

— Michael Benjamin

371

Tôi đang cố gắng đặt div đến một tỷ lệ phần trăm nhất định trong CSS

Tỷ lệ phần trăm là gì?

Để đặt chiều cao phần trăm, phần tử cha của nó (*) phải có chiều cao rõ ràng. Điều này khá rõ ràng, ở chỗ nếu bạn để lại chiều cao auto, khối sẽ lấy chiều cao của nội dung của nó ... nhưng nếu nội dung đó có chiều cao được biểu thị theo tỷ lệ phần trăm của phụ huynh mà bạn tự tạo ra một chút Bắt 22. Trình duyệt bỏ cuộc và chỉ sử dụng chiều cao nội dung.

Vì vậy, cha mẹ của div phải có một thuộc tính rõ ràng height. Trong khi chiều cao đó cũng có thể là một tỷ lệ phần trăm nếu bạn muốn, điều đó chỉ giúp chuyển vấn đề lên cấp độ tiếp theo.

Nếu bạn muốn làm cho chiều cao div thành một tỷ lệ phần trăm của chiều cao khung nhìn, mọi tổ tiên của div, bao gồm <html>và <body>, phải có height: 100%, do đó, có một chuỗi các tỷ lệ phần trăm rõ ràng xuống tới div.

(*: hoặc, nếu div được định vị, 'khối chứa', là tổ tiên gần nhất cũng được định vị.)

Ngoài ra, tất cả các trình duyệt hiện đại và IE> = 9 đều hỗ trợ các đơn vị CSS mới liên quan đến chiều cao khung nhìn ( vh) và chiều rộng khung nhìn ( vw):

div {
    height:100vh; 
}

Xem ở đây để biết thêm .

— hoàng tử
nguồn

Mặc dù không hoạt động đối với stackoverflow

— dọc.com /questions / 23198237 / từ

1

Xin vui lòng xem câu trả lời của Brian Campbell dưới đây tôi tin rằng đó là giải pháp chính xác. Câu trả lời này dường như là một cách giải quyết và không giải quyết được vấn đề thực tế.

— Nhà phát triển MG

69

Bạn cần phải thiết lập chiều cao trên <html>và <body>các yếu tố; nếu không, chúng sẽ chỉ đủ lớn để phù hợp với nội dung. Ví dụ :

<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>

Mở rộng đoạn trích

— Brian Campbell
nguồn

6

_¬ Tôi mất 20 phút để nhận ra mình cũng phải đặt chiều cao của tài liệu thành 100%. Tôi đọc nó hơi muộn, nhưng nó vẫn rất tuyệt vời. thở dài

— omninonsense

Điều này nên được bầu lên là câu trả lời vì nó đưa ra một giải pháp cho rất nhiều người đến đây tự hỏi những gì có thể được thực hiện theo dõi hầu hết các câu trả lời đầu tiên và nghĩ rằng nó không thể và đi lang thang ra khỏi suy nghĩ cho dù bất kỳ phương pháp nào khác tồn tại mà không cần đọc bài viết này

— codefreaK

Tôi đồng ý đây là câu trả lời đúng, chiều cao không hoạt động vì phần tử cha là phần thân và html cần được đặt. Câu trả lời này phải là câu trả lời được chấp nhận.

— Nhà phát triển MG

Đây không phải là một câu trả lời đúng - nếu nội dung lớn hơn sẽ phù hợp với chiều cao của màn hình thì phần còn lại của nội dung sẽ không còn hiển thị nữa, do đó chiều cao KHÔNG được đặt thành 100% cửa sổ trình duyệt mà lại là 100% của nội dung. Điều đó có thể không hợp lý, nhưng đó là những gì xảy ra trong hai trình duyệt chính, Firefox và Chrome - hãy dùng thử. Do đó, câu trả lời được chấp nhận là duy nhất đúng.

— nepdev

15

Câu trả lời của bobince sẽ cho bạn biết trong trường hợp nào "chiều cao: XX%;" sẽ hoặc không làm việc.

Nếu bạn muốn tạo một phần tử với tỷ lệ được đặt (chiều cao:% chiều rộng của chính nó), cách tốt nhất để làm điều đó là bằng cách thiết lập hiệu quả chiều cao bằng cách sử dụng padding-bottom. Ví dụ cho hình vuông:

<div class="square-container">
  <div class="square-content">
    <!-- put your content in here -->
  </div>
</div>

.square-container {  /* any display: block; element */
  position: relative;
  height: 0;
  padding-bottom: 100%; /* of parent width */
}
.square-content {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

Container vuông sẽ chỉ được làm bằng đệm, và nội dung sẽ mở rộng để lấp đầy container. Bài viết dài từ năm 2009 về chủ đề này: http://alistapart.com/article/creating-intrinsic-ratios-for-video

— Olex Ponomarenko
nguồn

công việc này thật tuyệt Nó cũng cảm thấy nhanh trong trình duyệt trong khi thay đổi kích thước một trang chứa hơn 100 thành phần. cảm ơn!

— hiệu trưởng

5

Bạn có thể sử dụng 100vw / 100vh. CSS3 cung cấp cho chúng tôi các đơn vị tương đối quan sát. 100vw có nghĩa là 100% chiều rộng khung nhìn. 100vh; 100% chiều cao.

    <div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
        <div style="width:70%; height: 100%; border: 2px dashed red"></div>
        <div style="width:30%; height: 100%; border: 2px dashed red"></div>
    </div>

— Ahmad Aghazadeh
nguồn

4

Chào! Để sử dụng tỷ lệ phần trăm (%), bạn phải xác định% của phần tử cha. Nếu bạn sử dụng body {height: 100%} thì nó sẽ không hoạt động vì cha mẹ không có phần trăm về chiều cao. Trong trường hợp đó để làm việc với chiều cao cơ thể đó, bạn phải thêm phần này vào html {height: 100%}

Trong trường hợp khác để loại bỏ phần trăm xác định cha mẹ bạn có thể sử dụng

cơ thể {chiều cao: 100vh}

vh là viết tắt của chiều cao khung nhìn

Tôi nghĩ nó giúp

— Ông A. Barik
nguồn

2

Đôi khi, bạn có thể muốn đặt điều kiện chiều cao của div một cách có điều kiện, chẳng hạn như khi toàn bộ nội dung nhỏ hơn chiều cao của màn hình. Đặt tất cả các thành phần chính thành 100% sẽ cắt nội dung khi nó dài hơn kích thước màn hình.

Vì vậy, cách để khắc phục điều này là đặt chiều cao tối thiểu:

Tiếp tục để các phần tử cha tự động điều chỉnh chiều cao của chúng Sau đó, trong div chính của bạn, trừ các kích thước pixel của div đầu trang và chân trang từ 100vh (đơn vị khung nhìn). Trong css, một cái gì đó như:

chiều cao tối thiểu: calc (100vh - 246px);

100vh là toàn bộ chiều dài của màn hình, trừ đi các div xung quanh. Bằng cách đặt chiều cao tối thiểu và không phải chiều cao, nội dung dài hơn màn hình sẽ tiếp tục chảy, thay vì bị cắt.

— Jahmic
nguồn