Làm cách nào để buộc một khối DIV mở rộng xuống cuối trang ngay cả khi nó không có nội dung?

190

Trong phần đánh dấu được hiển thị bên dưới, tôi đang cố gắng để div nội dung kéo dài đến cuối trang nhưng nó chỉ kéo dài nếu có nội dung hiển thị. Lý do tôi muốn làm điều này là vì đường viền dọc vẫn xuất hiện trên trang ngay cả khi không có bất kỳ nội dung nào để hiển thị.

Đây là HTML của tôi :

<body>
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

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

Và CSS của tôi :

body {
    font-family: Trebuchet MS, Verdana, MS Sans Serif;
    font-size:0.9em;
    margin:0;
    padding:0;
}
div#header {
    width: 100%;
    height: 100px;
}
#header a {
    background-position: 100px 30px;
    background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
    height: 80px;
    display: block;
}
#header, #menuwrapper {
    background-repeat: repeat;
    background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
    height:25px;
}
div#menuwrapper {
    width:100%
}
#menu, #content {
    width:1024px;
    margin: 0 auto;
}
div#menu {
    height: 25px;
    background-color:#50657a;
}
css  html  border 
— Vince Panuccio
nguồn
Bạn muốn nó làm gì nếu có nhiều nội dung hơn thì có thể phù hợp trên trang? Những trình duyệt nào bạn quan tâm?
— drs9222

Câu trả lời:

117

Vấn đề của bạn không phải là div không ở độ cao 100%, mà là thùng chứa xung quanh nó không phải. Điều này sẽ giúp ích trong trình duyệt Tôi nghi ngờ bạn đang sử dụng:

html,body { height:100%; }

Bạn cũng có thể cần phải điều chỉnh phần đệm và lề, nhưng điều này sẽ giúp bạn đạt được 90%. Nếu bạn cần làm cho nó hoạt động với tất cả các trình duyệt, bạn sẽ phải loay hoay một chút.

Trang web này có một số ví dụ tuyệt vời:

http://www.brunasy.org/test/html_body_0.html
http://www.brunasy.org/test/html_body_11b.html
http://www.brunasy.org/test/index.html

Tôi cũng khuyên bạn nên truy cập http://quirksmode.org/

— Jason Hernandez
nguồn
46
Giải pháp này không thân thiện với các trang cuộn.
— jbranchaud
3
Thuộc tính chiều cao tối thiểu trong CSS sẽ giúp anh ta thoát ra ... Tôi đoán
— Alfabravo
1
Điều thú vị là điều này đã sắp xếp các vấn đề cuộn của tôi trái ngược với việc gây ra chúng
— Alan Macdonald
Nó không hoạt động với tôi trong phiên bản chrome mới nhất.
— HelloWorldNoMore
48

Tôi sẽ cố gắng trả lời câu hỏi trực tiếp trong tiêu đề, thay vì bị bẻ cong khi dán chân trang xuống cuối trang.

Đặt div mở rộng xuống cuối trang nếu không đủ nội dung để điền vào chế độ xem trình duyệt dọc có sẵn:

Demo tại (kéo tay cầm khung để xem hiệu ứng): http://jsfiddle.net/NN7ky
(upside: sạch sẽ, đơn giản. Nhược điểm: yêu cầu flexbox - http://caniuse.com/flexbox )

HTML:

<body>

  <div class=div1>
    div1<br>
    div1<br>
    div1<br>
  </div>

  <div class=div2>
    div2<br>
    div2<br>
    div2<br>
  </div>

</body>

CSS:

* { padding: 0; margin: 0; }

html, body {
  height: 100%;

  display: flex;
  flex-direction: column;
}

body > * {
  flex-shrink: 0;
}

.div1 { background-color: yellow; }

.div2 {
  background-color: orange;
  flex-grow: 1;
}

ta-da - hoặc tôi quá buồn ngủ

— Gima
nguồn
14
Một số người trong chúng ta may mắn chỉ hỗ trợ các trình duyệt "hiện đại" nên điều này cực kỳ hữu ích với tôi. Cảm ơn Gima. Tôi đã thử một vài cách để làm một cái gì đó như thế này nhưng nó luôn bị phá vỡ theo nhiều cách tinh tế khác nhau. Thế này tốt hơn. Vẫn không hiểu chính xác tại sao nó hoạt động theo cách này.
— Chris Nicola
1
Phần tử Flexbox cố gắng phân chia khu vực nội dung của nó cho các phần tử trong đó. Giải pháp tôi đưa ra hoạt động bằng 1) từ chối thu hẹp div và 2) cho phép phát triển .div2. Do đó, div không thu nhỏ để ẩn nội dung của họ và chỉ .div2 được phép mở rộng.
— Gima
Vì vậy, điều này khắc phục sự cố tôi gặp phải trong Firefox, nơi nội dung vẫn hơi quá lớn đối với trình duyệt. Thật không may, trong Chrome, điều này một mình không khắc phục được vấn đề đó. Tuy nhiên, cũng đặt lề và phần đệm thành 0.
— Michael Scheper
Đây là câu trả lời đúng, chiều cao tối thiểu: 100% chỉ hoạt động nếu không có gì nữa trong thùng chứa cha mẹ và calc không thực sự hữu ích nếu anh chị em ở trên phần tử mở rộng có chiều cao không xác định
— zakius
Sau nhiều giờ vật lộn với vấn đề này, đây là giải pháp duy nhất thực sự khắc phục nó cho tôi. Chỉ thiếu một chút giải thích về những gì mỗi phần làm. Nhưng dù sao, cảm ơn bạn rất nhiều @Gima.
— pylund
18

Hãy thử chơi xung quanh với quy tắc css sau:

#content {
    min-height: 600px;
    height: auto !important;
    height: 600px;
}

Thay đổi chiều cao cho phù hợp với trang của bạn. chiều cao được đề cập hai lần để tương thích trình duyệt chéo.

— Kevin đọc
nguồn
Điều này hoạt động, nhưng tôi thấy rằng nếu tôi tăng chiều cao tối thiểu lên hơn 600px, nó sẽ tạo ra một cuộn. Bạn có biết tại sao điều này lại xảy ra không?
— Siddharth Patel
1
@SiddharthPatel Vì div #content đang tràn ra cha mẹ của nó. Vì vậy, hãy đặt cha mẹ của #content div có giá trị tràn: auto hoặc overflow: hidden css và nó sẽ mở rộng / tràn để phù hợp, thay vì cuộn. Có lẽ sẽ tốt hơn để đặt ra những câu hỏi như câu hỏi mới vào lần tới thay vì bình luận :)
— Colt McCormack
Sau khi thử phương pháp của mỗi câu trả lời, đây là cách duy nhất có hiệu quả. Ngay cả điều này cũng hoạt động hoàn hảo, bởi vì tôi phải điều chỉnh giá trị chiều cao để phù hợp với chiều cao của trang, do đó cần phải điều chỉnh. Tuy nhiên, nó hoạt động như nhau cho tất cả các trình duyệt.
— TARKUS
Cảm ơn bạn rất nhiều vì câu trả lời này. Nó đơn giản và hoạt động tốt trên nhiều nền tảng. Tôi đã thực sự sử dụng điều này trước đây mà không nhận ra khoảng 1 năm trước, ước gì tôi có thể nâng cấp hai lần.
— vedi0boy
4

Hãy thử giải pháp "Chú ý chân" của Ryan Fait,

http://ryanfait.com/sticky-footer/
http://ryanfait.com/resource/footer-stick-to-bottom-of-page/

Hoạt động trên IE, Firefox, Chrome, Safari và được cho là Opera, nhưng chưa thử nghiệm điều đó. Đó là một giải pháp tuyệt vời. Rất dễ dàng và đáng tin cậy để thực hiện.

— Anjisan
nguồn
7
Liên kết xuống! Liên kết xuống!
— codemirror
3
Đây là những người bạn đã ngã xuống của chúng ta
— Abraham Brookes
1
— c24w
3

Thuộc tính chiều cao tối thiểu không được hỗ trợ bởi tất cả các trình duyệt. Nếu bạn cần #content của mình để mở rộng chiều cao của nó trên các trang dài hơn, thuộc tính chiều cao sẽ cắt ngắn nó.

Đó là một chút hack nhưng bạn có thể thêm một div trống với chiều rộng 1px và chiều cao, ví dụ 1000px bên trong #content div của bạn. Điều đó sẽ buộc nội dung phải cao ít nhất 1000px và vẫn cho phép nội dung dài hơn để mở rộng chiều cao khi cần

— Gen
nguồn
3

Mặc dù nó không thanh lịch như CSS thuần túy, một chút javascript có thể giúp thực hiện điều này:

<html>
<head>
<style type='text/css'>
    div {
        border: 1px solid #000000;
    } 
</style>
<script type='text/javascript'>

    function expandToWindow(element) {
         var margin = 10; 

         if (element.style.height < window.innerHeight) { 
            element.style.height = window.innerHeight - (2 * margin) 
         }
    }


</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>
— Adam Franco
nguồn
3

Thử:

html, body {
    height: 102%;
}
.wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}
.div {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1000px;
    min-height: 100%;
}

Chưa thử nghiệm nó ...

— Bước
nguồn
3

Chân trang với chiều cao cố định:

Lược đồ HTML:

<body>
   <div id="wrap">
   </div>
   <div id="footer">
   </div>
</body>

CSS:

html, body {
    height: 100%;
}
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px;
}
#footer {
    height: 60px;
}
— David Horák
nguồn
2

Hãy thử http://mystrd.at/modern-clean-css-sticky-footer/

Liên kết ở trên không hoạt động, nhưng liên kết này https://stackoverflow.com/a/18066619/1944643 là ok. : D

Bản giới thiệu:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="http://mystrd.at">
    <meta name="robots" content="noindex, nofollow">
    <title>James Dean CSS Sticky Footer</title>
    <style type="text/css">
        html {
            position: relative;
            min-height: 100%;
        }
        body {
            margin: 0 0 100px;
            /* bottom = footer height */
            padding: 25px;
        }
        footer {
            background-color: orange;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 100px;
            width: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <article>
        <!-- or <div class="container">, etc. -->
        <h1>James Dean CSS Sticky Footer</h1>

        <p>Blah blah blah blah</p>
        <p>More blah blah blah</p>
    </article>
    <footer>
        <h1>Footer Content</h1>
    </footer>
</body>

</html>
— Vinicius Jose Latorre
nguồn
1
@codemirror cảm ơn, tôi vừa chỉnh sửa nhận xét với một liên kết khác đang hoạt động.
— Vinicius José Latorre
1

Bạn có thể sử dụng đơn vị độ dài "vh" cho thuộc tính chiều cao tối thiểu của chính phần tử và cha mẹ của nó. Nó được hỗ trợ kể từ IE9:

<body class="full-height">
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

    <div id="content" class="full-height">
    </div>
</body>

CSS:

.full-height {
    min-height: 100vh;
    box-sizing: border-box;
}
— Nico
nguồn
Điều này chỉ kéo dài div theo chiều cao của khung nhìn, không phải chính trang đó.
— jansmolders86
1

Tôi nghĩ rằng vấn đề sẽ được khắc phục chỉ bằng cách làm cho html điền 100%, có thể cơ thể sẽ lấp đầy 100% html nhưng html không lấp đầy 100% màn hình.

Hãy thử với: 

html, body {
      height: 100%;
}
— David Marciel
nguồn
0

Tôi không có mã, nhưng tôi biết tôi đã làm điều này một lần bằng cách sử dụng kết hợp chiều cao: 1000px và margin-bottom: -1000px; Hãy thử điều đó.

— Alexander Morland
nguồn
Wow, nó thực sự hoạt động! Nhưng nếu nội dung tràn vào container, không thể thấy phần tràn ra ...
— adripanico
0

Tùy thuộc vào cách bố trí của bạn hoạt động, bạn có thể thoát khỏi việc đặt nền trên thành <html>phần, luôn luôn ít nhất là chiều cao của chế độ xem.

0

Không thể thực hiện điều này bằng cách chỉ sử dụng biểu định kiểu (CSS). Một số trình duyệt sẽ không chấp nhận

height: 100%;

như một giá trị cao hơn quan điểm của cửa sổ trình duyệt.

Javascript là giải pháp trình duyệt chéo dễ dàng nhất, mặc dù như đã đề cập, không phải là một giải pháp sạch hay đẹp.

— Martin
nguồn
-2

Tôi biết đây không phải là phương pháp tốt nhất, nhưng tôi không thể tìm ra nó mà không làm hỏng các vị trí tiêu đề, menu, v.v. Vì vậy, tôi đã sử dụng một bảng cho hai colums. Đó là một sửa chữa NHANH. Không cần JS;)

— Ôn-D
nguồn
-2

Không phải là cách tốt nhất cũng như không phải là sự thực thi tốt nhất của các tiêu chuẩn lớn nhất, nhưng bạn có thể thay đổi DIV cho SPAN ... Đây không phải là cách dễ dàng nhưng được khắc phục nhanh = P =)

— Metafaniel
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.