Giả lập CSS tinh khiết của khung hình

Tôi đã tìm kiếm hơn 1 giờ mà không thành công. Có một cách CSS tinh khiết của thi đua một frameset? Ý tôi là, thực sự mô phỏng nó. Tôi đã tìm thấy một số công cụ thú vị, nơi bạn sẽ có cố định các khối trên cùng và dưới cùng, nhưng thanh cuộn cho nội dung là thanh cuộn cơ thể trình duyệt thông thường. Những gì tôi cần là một thanh cuộn chỉ dành cho khối nội dung, như một bộ khung sẽ làm.Giả lập CSS tinh khiết của khung hình

Tôi có thể làm cho nó hoạt động bằng cách gán tràn: tự động vào div nội dung của tôi và đặt chiều cao cố định. Nhưng vấn đề là tôi không biết kích thước cửa sổ trình duyệt của khách hàng mà không sử dụng javascript. Và tôi không muốn sử dụng javascript cho việc này. Tôi cũng canot sử dụng phần trăm cho chiều cao như khối trên cùng của tôi có một chiều cao cố định. Khối thấp hơn là khối mở rộng hoặc thu nhỏ tùy thuộc vào chiều cao cửa sổ trình duyệt. Bất kỳ trợ giúp nào được đánh giá cao. Cảm ơn bạn!

Nguồn

2010-08-08 Marcos Buarque

Làm thế nào về một cái gì đó như thế này?

HTML

<div id="header"> 
    <img src="logo.gif" alt="logo" /> 
    <h1 class="tagline">Oh em gee</h1> 
</div> 
<div id="content"> 
    <div id="content-offset"> 
     <p>This will be 100% of the screen height, BUT the content offset will have a top pixel margin which allows for your header. Set this to the pixel value of your header height.</p> 
    </div> 
</div>

CSS

body, html { 
    margin: 0; padding: 0; 
    height: 100%; 
} 
#header { 
    height: 120px; 
    position: fixed; 
    top: 0; 
    background: red; 
    width: 100%; 
} 

#content { 
    height: 100%; 
    position: absolute; 
    top: 0; 
} 
#content-offset { 
    margin-top: 120px; 
    background: aqua; 
    height: 100%; 
    width: 100%; 
    position: fixed; 
    overflow: auto; 
}

Nguồn

2010-08-08 05:06:41 Marko

1 giải pháp tuyệt vời Marko, tôi thích điều đó. – Gabriel

Hummm. Nghe có vẻ thú vị ... Tôi sẽ thử nó ngay bây giờ ... Cảm ơn! –

Hãy cho tôi biết cách bạn đi, tôi chỉ thử nghiệm nó trong đầu của tôi :) – Marko

No. Tôi nghĩ bạn sẽ phải sử dụng javascript để có kích thước cửa sổ cho điều này, trừ khi bạn đặt khối trên thành kích thước% cố định, ví dụ: làm cho khối trên cùng 10% và dưới cùng 90%.

Nguồn

2010-08-08 05:01:16

Câu trả lời của Makro gần, nhưng không làm việc tốt. Nội dung chồng chéo tiêu đề.

Đến thời điểm này, bạn muốn sử dụng position: fixed; cho tiêu đề của mình, không phải cho nội dung của bạn. Điều này cũng làm cho wrapper thừa. Đây là một ví dụ khởi đầu cơ bản, bạn có thể copy'n'paste'n'run nó.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>SO question 3433129</title> 
     <style> 
      body { 
       margin: 0; 
       background: aqua; 
      } 
      #header { 
       position: fixed; 
       height: 120px; 
       width: 100%; 
       background: pink; 
      } 
      #content { 
       padding-top: 120px; /* Should be the same as #header height */ 
      } 
     </style> 
    </head> 
    <body> 
     <div id="header"> 
      <h1>Header</h1> 
     </div> 
     <div id="content"> 
      <p>Start of content.</p> 
      <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p> 
      <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p> 
      <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p> 
      <p>End of content.</p> 
     </div> 
    </body> 
</html>

Nguồn

2010-08-08 05:22:12 BalusC

Nó chồng chéo tiêu đề - nhưng chú ý đến lề trên trên phần bù trừ? bằng cách này, padding được ADDED trên đầu chiều rộng/chiều cao, vì vậy # nội dung của bạn sẽ là 100% + 120px. – Marko

@Marko: Chiều cao 100% không nên có ở vị trí đầu tiên (cũng sẽ không hoạt động vì html/body không có chiều cao 100%;)). Tôi đã cập nhật câu trả lời. – BalusC

Cảm ơn, nhưng sự khác biệt từ những gì tôi cần là thanh cuộn cho khối #content trong ví dụ của bạn thực sự là thanh cuộn của trình duyệt. Tôi cần một thanh cuộn chỉ chạy bên trong khối #content, như một tự động tràn. –

Giả lập CSS tinh khiết của khung hình

Trả lời

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