2013-12-09 18 views
17

tôi đang cố gắng để tạo ra một bố trí ở đây, trong đó trông giống như sau: Dưới đây là the fiddleThực hiện một div dính vào đáy của cha mẹ

<body> 
    <div class="wrapper"> 
     <div class="header"> 
      Header 
     </div> 
     <div class="content"> 
      This is the content section 
     </div> 
     <div class="stream-content"> 
       This is the stream content. 
     </div> 
     <div class="push"> 
     </div> 
    </div> 
    <div class="footer"> 
    </div> 
<body> 

Tôi muốn content section để đưa lên không gian đầy đủ giữa headerfooter phần. Có một phần bổ sung được gọi là [stream-content] nếu có (sẽ chỉ có trên trang chủ) phải có vị trí ngay trước footer. Và trong trường hợp đó, phần content sẽ chiếm toàn bộ khoảng trống giữa các phần headerstream-content. Tôi đã thử làm điều tương tự với vị trí tuyệt đối nhưng tất cả các yếu tố của tôi đã đi haywire, vì vậy muốn hiểu đúng cách để làm điều này. Cảm ơn trước cho tất cả sự giúp đỡ!

+0

Bạn luôn có thể làm cho chiều cao của div trong phần trăm. Tiêu đề 5%, nội dung 90%, chân trang 5%. Tôi không chắc chắn nếu phần trăm được tán thành, nhưng nó sẽ làm việc. –

+0

[điều này có thể giúp] (http://jsfiddle.net/peteng/9DLeg/) - chỉ cần đặt nội dung và luồng nội dung vào phần giữa – Pete

Trả lời

30

Thêm position:relative vào lớp bao bọc của bạn. Thêm position:absolute;bottom:0; vào lớp nội dung luồng.

Kiểm tra tại đây. Fiddle

+0

Hey Cảm ơn bạn đã phản hồi. Nhưng tôi nhận thấy chân trang màu đỏ mà tôi nghĩ là dính cũng giảm xuống khi tôi thêm rất nhiều vấn đề trong phần 'nội dung'. Tôi đã thực hiện rằng footer dính nhìn vào css-thủ thuật ở đây http://css-tricks.com/snippets/css/sticky-footer/ nhưng nó còn có vẻ là làm việc ngay bây giờ. Có điều gì tôi nhớ ở đây không? Sẽ rất tuyệt vời để được giúp đỡ. – user1240679

+0

Vì vậy, bạn muốn nó dính vào dưới cùng của trình duyệt hoặc dưới cùng của trình bao bọc? –

+4

Điều này không liên quan gì đến trình bao bọc. Vị trí 'cố định' liên quan đến chế độ xem của màn hình, không phải là phần tử gốc của phần tử. –

0

Nếu tôi hiểu chính xác thì một cách để làm điều đó là đặt [nội dung hơi nước] bên ngoài trình bao bọc, vì trình bao bọc là phần giữ chân trang ở dưới cùng. Nếu bạn phải có nắp đậy bên trong [hơi nước] bên trong, bạn có thể thử thứ gì đó như thế này http://ryanfait.com/sticky-footer/ để giữ nó ở phía dưới cùng với chân trang

+0

Liên kết bị hỏng. Tôi sẽ cố gắng tìm phiên bản đã lưu trữ nhưng robots.txt không cho phép lập chỉ mục. – carefulnow1

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