Tại sao chiều cao không: 100% hoạt động để mở rộng div lên chiều cao màn hình?

295

Tôi muốn băng chuyền DIV (s7) mở rộng theo chiều cao của toàn bộ màn hình. Tôi không biết tại sao nó không thành công. Để xem trang bạn có thể vào đây .

body {
  height: 100%;
  color: #FFF;
  font: normal 28px/28px'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
  background: #222 url('') no-repeat center center fixed;
  overflow: hidden;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.holder {
  height: 100%;
  margin: auto;
}
#s7 {
  width: 100%;
  height: 100%: margin: auto;
  overflow: hidden;
  z-index: 1;
}
#s7 #posts {
  width: 100%;
  min-height: 100%;
  color: #FFF;
  font-size: 13px;
  text-align: left;
  line-height: 16px;
  margin: auto;
  background: #AAA;
}

<div class="nav">
  <a class="prev2" id="prev2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">
  </a>
  <a class="next2" id="next2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png">
  </a>
</div>

<div class="holder">
  <tr>
    <td>
      <div id="s7">
        {block:Posts}
        <div id="posts">

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

html css height

— Bá tước Larson
nguồn

2

Đây là một lời giải thích đơn giản và rõ ràng: stackoverflow.com/a/31728799/3597276

— Michael Benjamin

có lẽ là giải pháp tốt nhất cho các phần tử lồng nhau không nên kéo dài đến toàn bộ chiều cao của stackoverflow.com/questions/7049875/height-100-not-

— Work / Lỗi

409

Để giá trị phần trăm hoạt động theo chiều cao, chiều cao của cha mẹ phải được xác định. Ngoại lệ duy nhất là phần tử gốc<html> , có thể là phần trăm chiều cao. .

Vì vậy, bạn đã đưa ra tất cả chiều cao các yếu tố của mình, ngoại trừ <html>, vì vậy điều bạn nên làm là thêm điều này:

html {
    height: 100%;
}

Và mã của bạn sẽ hoạt động tốt.

* { padding: 0; margin: 0; }
html, body, #fullheight {
    min-height: 100% !important;
    height: 100%;
}
#fullheight {
    width: 250px;
    background: blue;
}

<div id=fullheight>
  Lorem Ipsum        
</div>

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

Ví dụ JsFiddle .

— Ma của Madara
nguồn

23

Ok, vậy điều này có thể khiến tôi trông cực kỳ ngu ngốc, nhưng dù sao đi nữa : Ý bạn là nói đó <html>là một yếu tố thực tế - giống như <p>hay <img />? Tôi nghĩ mục đích duy nhất <html>là xác định phần đầu và phần cuối của tài liệu HTML. Ý tôi là, tôi nghĩ rằng nó ở đó, không phải để bố trí, nhưng chỉ để trình duyệt biết loại tài liệu mà nó đang xem? Tôi hoàn toàn suy nghĩ

— jay_t55

29

@Joey: HTML là một yếu tố thực tế. Bạn có thể định kiểu nó bằng CSS, nối các sự kiện với nó bằng JavaScript, thêm các lớp và ID vào nó và nó xuất hiện trong DOM. Trình duyệt sẽ giả sử một tài liệu HTML ngay cả khi không có <html>thẻ và thậm chí không có <head>hoặc <body>các thành phần. Tuy nhiên, thông số kỹ thuật HTML, coi <html>thẻ bắt buộc. Nói tóm lại, vâng, nó là một yếu tố chính thức như tất cả các yếu tố HTML khác.

— Ma của Madara

1

@SecondRikudo: Không, <html>thẻ là tùy chọn theo thông số kỹ thuật (ví dụ: HTML4 và HTML5). Và vâng, phần tử được tạo ra bằng mọi cách.

— Robert Siemer

2

hmmm ... đối với tôi, chỉ cách này làm việc được thiết lập cả hai htmlvà bodynhư height: 100%(Cũng như các khóa học cụ thể divtôi muốn thừa hưởng chiều cao 100%)

— james

1

@james Vâng, tất cả các bậc cha mẹ phải có chiều cao được biết đến.

— Madara's Ghost

147

_{Vì không ai đề cập đến điều này ..}

Phương pháp hiện đại:

Thay thế cho việc đặt cả độ cao của html/ bodyphần tử thành 100%, bạn cũng có thể sử dụng độ dài phần trăm khung nhìn:

5.1.2. Độ dài phần trăm lượt xem: các đơn vị 'vw', 'vh', 'vmin', 'vmax'

Độ dài phần trăm khung nhìn liên quan đến kích thước của khối chứa ban đầu. Khi chiều cao hoặc chiều rộng của khối chứa ban đầu bị thay đổi, chúng được chia tỷ lệ tương ứng.

Trong trường hợp này, bạn có thể sử dụng giá trị 100vh(là chiều cao của khung nhìn) - (ví dụ)

body {
    height: 100vh;
}

Thiết lập min-heightcũng hoạt động. (thí dụ)

body {
    min-height: 100vh;
}

Các đơn vị này được hỗ trợ trong hầu hết các trình duyệt hiện đại - hỗ trợ có thể được tìm thấy ở đây .

— Josh Crozier
nguồn

1

Tôi không thấy bất kỳ lợi ích nào cho việc này cả. Nó không tạo ra công việc bổ sung cho trình duyệt cần tính toán mọi thứ liên quan đến chế độ xem trình duyệt? Kích thước khung nhìn chỉ có vẻ có lợi khi bạn thực sự muốn kích thước một cái gì đó liên quan đến chiều cao trình duyệt.

— Robert đã đi vào

12

@RobertWent Có lợi ích. Chẳng hạn, height: 100%chỉ hoạt động nếu phần tử cha có chiều cao xác định. Chắc chắn có một số trường hợp mà cha mẹ của một phần tử không có chiều cao xác định và đơn vị tỷ lệ phần trăm khung nhìn giải quyết điều đó. Nói cách khác, nếu bạn có một yếu tố lồng nhau sâu sắc, bạn có thể chỉ cần đặt 100vhvà nó sẽ có chiều cao của 100%trình duyệt. Bạn có thể không thấy bất kỳ lợi ích nào, nhưng tôi đã ở trong nhiều trường hợp chúng là giải pháp duy nhất. Các đơn vị này có thể không có lợi cho các phần tử gốc như html/ body, nhưng dù sao, đây là một giải pháp thay thế

— Josh Crozier

2

Nhưng chúng ta đang nói về yếu tố cơ thể, không phải là yếu tố lồng nhau sâu sắc. Chỉ có một phụ huynh có thể, phần tử html. Đây là lý do tại sao tôi đã đề cập rằng tôi thấy không có lợi ích và nó có thể tồi tệ hơn là chỉ thiết lập 100%. Nhận xét của bạn nói không có gì để làm cho tôi mỏng. Chỉ vì một cái gì đó mới không làm cho nó tốt hơn. Tuy nhiên, nó là một thay thế.

— Robert Went

4

Một vấn đề với cách tiếp cận này là iPhone loại trừ thanh địa chỉ và điều hướng dưới cùng từ chiều cao xem, có nghĩa là body { height: 100vh }sẽ có một thanh cuộn khi tải trang ban đầu.

— BHOLT

2

Đẹp. Tôi đã thử cách tiếp cận khác, tôi đặt height: 100% !important" to each parent til html` nhưng không thành công, tôi có thể thấy rằng mọi nút của cây đều thực sự 100%nhưng tôi không thể quản lý để đặt 100% trong phần tử mong muốn, nhưng với kiểu khung nhìn thì dễ dàng

— pmiranda

25

Bạn cũng sẽ cần đặt 100% chiều cao cho htmlphần tử:

html { height:100%; }

— shanethehat
nguồn

20

Ngoài ra, nếu bạn sử dụng position: absolutethì height: 100%sẽ hoạt động tốt.

— Steve Tauber
nguồn

4

Sẽ là một sửa chữa tuyệt vời nếu tôi không sử dụng flexbox để tạo bố cục của mình. : /

— Landon Gọi

2

Đừng quên thiết lập width:100%;và cha mẹ position:relative;.

— Kai Noack

8

Bạn nên thử với các yếu tố cha mẹ;

html, body, form, main {
    height: 100%;
}

Sau đó, điều này sẽ là đủ:

#s7 {
   height: 100%;
}

— mrbengi
nguồn

5

ví dụ: nếu bạn muốn một cột bên trái (chiều cao 100%) và nội dung (tự động chiều cao) bạn có thể sử dụng tuyệt đối:

#left_column {
    float:left;
    position: absolute;
    max-height:100%;
    height:auto !important;
    height: 100%;
    overflow: hidden;

    width : 180px; /* for example */
}

#left_column div {
    height: 2000px;
}

#right_column {
    float:left;
    height:100%;
    margin-left : 180px; /* left column's width */
}

trong html:

  <div id="content">
      <div id="left_column">
        my navigation content
        <div></div>
      </div>

      <div id="right_column">
        my content
      </div>
   </div>

— YellowMart
nguồn

2

Điều này có thể không lý tưởng nhưng bạn luôn có thể làm điều đó với javascript. Hoặc trong trường hợp của tôi jQuery

<script>
var newheight = $('.innerdiv').css('height');
$('.mainwrapper').css('height', newheight);
</script>

— oo
nguồn

5

Không bao giờ là một ý tưởng tốt để sử dụng javascript khi css một mình sẽ đủ.

— Bosworth99

1

Tại sao thậm chí làm một cái gì đó như thế này và làm phức tạp nó nhiều hơn nó nên được? Tôi không hiểu một số câu trả lời lol ...

— CapturedTree

1

Trong nguồn trang tôi thấy như sau:

<div class="holder"> 
    <div id="s7" style="position: relative; width: 1366px; height: 474px; overflow: hidden;">

Nếu bạn đặt giá trị chiều cao trong thẻ, nó sẽ sử dụng giá trị này thay vì chiều cao được xác định trong tệp css.

— Steven
nguồn

Điều đó thật kỳ quặc bởi vì đây là những gì tôi thấy trong nguồn trang: <div class = "chủ sở hữu"> <tr> <td> <div id = "s7"> <div id = "post">

— Earl Larson

Ok, trong khi tôi không biết làm thế nào bạn có được mã trên, tôi đã vào và thay đổi <div id = "s7"> thành <div id = "s7" style = "height: 100%;"> và nó đã hoạt động. Có lẽ nó đang che giấu điều gì đó từ tôi? Dù bằng cách nào, thankyou :)

— Bá tước Larson

1

Nếu bạn hoàn toàn định vị các phần tử bên trong div, bạn có thể đặt phần đệm trên cùng và dưới cùng thành 50%.

Vì vậy, một cái gì đó như thế này:

#s7 {
    position: relative;
    width:100%;
    padding: 50% 0;
    margin:auto;
    overflow: hidden;
    z-index:1;
}

— Keith Brown
nguồn

1

Tôi không thấy làm thế nào điều này có thể hoạt động vì 50% tương đối với chiều rộng không phải chiều cao của phần tử chứa, hoặc tôi đang thiếu một cái gì đó ở đây?

— DrLightman

0

Đây là một giải pháp khác cho những người không muốn sử dụng html, body, .blah { height: 100% }.

.app {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
}

.full-height {
  height: 100%;
}

.test {
  width: 10px;
  background: red;
}

<div class="app">
  <div class="full-height test">
  </div>
  Scroll works too
</div>

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

— TheMisir
nguồn