css - يبقى div head في الأعلى ، div التمرير العمودي أدناه مع شريط التمرير المرفقة فقط إلى ذلك div




layout header (3)

HTML:

​<div class="header">This is the header</div>
<div class="content">This is the content</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS:

​.header
{
    height:50px;
}
.content
{
    position:absolute;
    top: 50px;
    left:0px;
    right:0px;
    bottom:0px;
    overflow-y:scroll;        
}​

https://code.i-harness.com

لدي 2 divs الرئيسي ، رأس وقائمة التمرير الواردة في div. أريد أن يظل الرأس دائمًا في أعلى الصفحة وقائمة التمرير أدناه. يجب إرفاق شريط التمرير بـ div التمرير وليس الصفحة بأكملها ، أي لا يظهر شريط التمرير على يمين رأس الصفحة ، فقط div التمرير.

هذا ما أحاول تحقيقه:

______________________
|_______header_______|
|                  |*|
|   Container Div  |*|
|                  |*|
|                  |*|
|                  |*|
|                  |*|
|                  |*|
----------------------

* = scrollbar

يجب أن يكون التخطيط سائلاً وإذا كانت النافذة ممتدة رأسيًا ، يجب أن يكون طول حاوية الحاوية وشريط التمرير الخاص بها أطول.

لا أريد وضع موضع الرأس position: fixed; كما سيكون شريط التمرير على اليمين بدلاً من أسفله.


العثور على السحر المرن.

Here مثال لكيفية القيام برأس ثابت ومحتوى قابل للتمرير. الشفرة:

<!DOCTYPE html>
<html style="height: 100%">
  <head>
    <meta charset=utf-8 />
    <title>Holy Grail</title>
    <!-- Reset browser defaults -->
    <link rel="stylesheet" href="reset.css">
  </head>
  <body style="display: flex; height: 100%; flex-direction: column">
    <div>HEADER<br/>------------
    </div>
    <div style="flex: 1; overflow: auto">
        CONTENT - START<br/>
        <script>
        for (var i=0 ; i<1000 ; ++i) {
          document.write(" Very long content!");
        }
        </script>
        <br/>CONTENT - END
    </div>
  </body>
</html>

* ميزة الحل المرن هي أن المحتوى مستقل عن أجزاء أخرى من التخطيط. على سبيل المثال ، لا يحتاج المحتوى إلى معرفة ارتفاع العنوان.

من أجل تنفيذ كامل للكأس المقدسة (رأس وتذييل ، وأمين ، وجانب ، ومحتوى) ، باستخدام شاشة مرنة ، اذهب إلى here .


هنا هو demo . استخدام position:fixed; top:0; left:0; position:fixed; top:0; left:0; بحيث يبقى الرأس دائمًا في المقدمة.

​#header {
    background:red;
    height:50px;
    width:100%;
    position:fixed;
    top:0;
    left:0;    
}.scroller {
    height:300px; 
    overflow:scroll;    
}






scroll