CSS - Chiều cao của 100% trừ đi #px - Header và Footer

Question

Trang web trong câu hỏi như sau:

// The Header // 
/*   */ 
/* CONTENT */ 
/*   */ 
// The footer // 

Cả header và footer đã cố định độ cao. Cho phép nói ví dụ rằng cả hai đều có chiều cao 20px. Tôi cần đặt chiều cao của nội dung là 100% trừ 40px (chiều cao đầu trang + chân trang). Tôi biết tôi có thể làm điều này một cách dễ dàng với JavaScript, nhưng nó sẽ là mát mẻ để tìm hiểu làm thế nào để làm điều đó với CSS đồng bằng, nếu nó có thể.

Answer 1

#header /* hypothetical name */ 
{ 
    height:100%; 
} 

#header p /* or any other tag */ 
{ 
    margin:20px 0 20px 0; 
} 

Chỉ cần đảm bảo không đặt lề và chiều cao trong cùng một thẻ. Bạn sẽ trải nghiệm một số kết quả điên rồ.

Answer 2

Đặt vị trí cố định trên đầu trang và chân trang và đặt chúng ở trên cùng của dưới cùng của cửa sổ tương ứng. Sau đó đặt đệm trên và dưới lên vùng nội dung 20px.

#header{position:fixed;top:0} 
#footer{position:fixed;bottom:0} 
#content{padding:20px 0} 

Answer 3

Ví dụ này có vẻ là cách mạnh mẽ nhất để thực hiện việc này. Trên thực tế, nó là một chút lỗi trong IE, bởi vì thay đổi kích thước đi sai đôi khi. Cụ thể, khi thực hiện thay đổi kích thước từ góc dưới bên phải và chỉ cần thay đổi kích thước theo chiều dọc bằng tay (đôi khi khó thực hiện), trang sẽ không làm mới trong IE. Tôi đã có cùng một vấn đề với điều này và chỉ cố định nó với JS sau khi tất cả, vì các sự kiện khác trên trang web của tôi.

http://www.xs4all.nl/~peterned/examples/csslayout1.html

Answer 4

Marnix của câu trả lời liên quan đến việc sử dụng hàng đầu và đệm dưới cùng của các yếu tố nội dung; của tôi liên quan đến việc sử dụng biên giới trên và dưới.

Tôi tự mình tìm giải pháp này trong khi cố gắng tìm cách làm điều gì đó tương tự mà không cần sử dụng bảng: làm cho chiều cao của phần tử trung tâm 100%, nhưng sau đó đặt mô hình kích thước hộp thành "border-box "(để chiều cao không chỉ bao gồm nội dung trong hộp mà còn cả đường viền xung quanh hộp), làm cho đường viền trên và dưới thực sự dày (ví dụ, 20px), sau đó sử dụng vị trí cố định để che phủ đầu trang và chân trang đường biên trên và dưới của phần tử trung tâm.

Đây là CSS mẫu của tôi:

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
#content { 
    height: 100%; 

    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
     /* Ensure that the height of the element includes the 
     box border, not just the content */ 

    border: 0; 
    border-top: 20px solid white; 
    border-bottom: 20px solid white; 
     /* Leave some space for the header and footer to 
     overlay. */ 
} 
#header, 
#footer { 
    position: fixed; 
    left: 0; 
    right: 0; 
    height: 20px; 
    background-color: #eee; 
     /* Specify a background color so the content text doesn't 
     bleed through the footer! */ 
} 
#header { 
    top: 0; 
} 
#footer { 
    bottom: 0; 
} 

này hoạt động trong Google Chrome 24 cho Mac. Tuy nhiên, tôi chưa thử nó trong các trình duyệt khác.

Hy vọng điều này sẽ giúp người khác vẫn đang đối mặt với sự cám dỗ khi chỉ cần sử dụng một bảng và hoàn tất bố cục trang. :-)

Answer 5

Nếu trình duyệt của bạn hỗ trợ CSS3, hãy thử sử dụng các yếu tố CSS Calc()

height: calc(100% - 65px); 

bạn cũng có thể muốn thêm tùy chọn trình duyệt tương thích:

height: -o-calc(100% - 65px); /* opera */ 
height: -webkit-calc(100% - 65px); /* google, safari */ 
height: -moz-calc(100% - 65px); /* firefox */