มี div ตำแหน่งคงที่ที่ต้องเลื่อนหากเนื้อหาล้น

ฉันมีสองปัญหาจริง ๆ แต่ให้แก้ไขปัญหาหลักก่อนเพราะฉันเชื่อว่าอีกที่อยู่ง่ายกว่า

ฉันมี div ตำแหน่งคงที่ที่ด้านซ้ายของสกรอลสำหรับเมนู ด้านขวาเป็น div มาตรฐานที่เลื่อนอย่างถูกต้อง ปัญหาคือเมื่อเบราว์เซอร์ดูพอร์ตมีขนาดเล็กเกินไปที่จะดูเมนูทั้งหมด .. ไม่มีวิธีใดที่จะเลื่อนดูที่ฉันสามารถหาได้ (อย่างน้อยก็ไม่ใช่ css) ฉันได้ลองใช้โอเวอร์โฟลว์ต่าง ๆ ใน css แต่ไม่มีอะไรทำให้ div เลื่อน div ที่มีเมนูตั้งไว้ที่ min-height: 100% และ position: fixed .. ทั้งสองคุณสมบัติที่ฉันต้องการเก็บไว้

div ที่มีเมนูอยู่ใน wrapper div อื่นที่อยู่ในตำแหน่งอย่างแน่นอนและตั้งค่าความสูงไว้ที่ 100%

ฉันจะเลื่อนดูในแนวตั้งได้อย่างไรถ้าเนื้อหานั้นสูงเกินไปสำหรับ div

ที่ทำให้ฉันไปที่ปัญหาอื่น ๆ ที่ฉันไม่ต้องการให้แถบเลื่อนเพื่อแสดง .. แต่ฉันคิดว่าฉันอาจมีคำตอบที่แล้ว (เฉพาะมันไม่ทำงานเพราะฉันไม่สามารถรับ div เพื่อเลื่อน เริ่มต้นกับ).

ทางออกใด ๆ ? บางทีจำเป็นต้องมีจาวาสคริปต์หรือไม่ (ซึ่งฉันรู้เพียงเล็กน้อยเกี่ยวกับ)

ตัวอย่าง JS Fiddle

และรหัสที่เกี่ยวข้องซึ่งเป็นสาเหตุของปัญหา (เนื่องจากการโพสต์สิ่งทั้งหมดที่นี่คือ waaay ยาวเกินไป):

.fixed-content {
    min-height:100%;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
} 

ลองเพิ่มความสูงด้วย: 100% เช่นกันเพื่อดูว่าเป็นปัญหาหรือไม่ แต่ก็ใช้ไม่ได้เช่นกัน ...

ปัญหาเกี่ยวกับการใช้height:100%คือมันจะเป็น 100% ของหน้าแทนที่จะเป็น 100% ของหน้าต่าง (ตามที่คุณอาจคาดหวังว่าจะเป็น) สิ่งนี้จะทำให้เกิดปัญหาที่คุณเห็นเนื่องจากเนื้อหาที่ไม่คงที่นั้นยาวพอที่จะรวมเนื้อหาที่มีความสูง 100% โดยไม่ต้องใช้แถบเลื่อน เบราว์เซอร์ไม่ทราบ / ไม่สนใจว่าคุณไม่สามารถเลื่อนแถบนั้นลงมาเพื่อดูได้

คุณสามารถใช้fixedเพื่อบรรลุสิ่งที่คุณต้องการจะทำ

.fixed-content {
    top: 0;
    bottom:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
}

ซอที่ทำจากซอของคุณนี้แสดงการแก้ไขของฉัน: http://jsfiddle.net/strider820/84AsW/1/

นี่คือการแก้ไขทั้งสองอย่าง

ก่อนอื่นเกี่ยวกับแถบข้างคงที่คุณต้องให้ความสูงเพื่อให้ล้น:

รหัส HTML:

<div id="sidebar">Menu</div>
<div id="content">Text</div>

รหัส CSS:

body {font:76%/150% Arial, Helvetica, sans-serif; color:#666; width:100%; height:100%;}
#sidebar {position:fixed; top:0; left:0; width:20%; height:100%; background:#EEE; overflow:auto;}
#content {width:80%; padding-left:20%;}

@media screen and (max-height:200px){
    #sidebar {color:blue; font-size:50%;}
}

ตัวอย่างสด: http://jsfiddle.net/RWxGX/3/

เป็นไปไม่ได้ที่จะไม่ได้รับแถบเลื่อนหากเนื้อหาของคุณสูงเกินความสูงของ div นั่นเป็นเหตุผลที่ฉันได้เพิ่มการสืบค้นสื่อสำหรับความสูงของหน้าจอ บางทีคุณสามารถปรับสไตล์ของคุณสำหรับขนาดหน้าจอสั้นเพื่อให้การเลื่อนไม่จำเป็นต้องปรากฏขึ้น

ไชโยอิกนาชิโอ

โดยทั่วไปส่วนคงที่ควรได้รับการตั้งค่าด้วยwidth, heightและtop, bottomคุณสมบัติ, มิฉะนั้นก็จะไม่รับรู้ขนาดและตำแหน่งของมัน

หากกล่องที่ใช้เป็นลูกโดยตรงสำหรับร่างกายและมีเพื่อนบ้านก็ควรตรวจสอบz-indexและtop, leftคุณสมบัติเนื่องจากพวกเขาสามารถทับซ้อนกันซึ่งอาจส่งผลกระทบต่อการเลื่อนเมาส์ของคุณขณะเลื่อนเนื้อหา

นี่คือวิธีแก้ปัญหาสำหรับกล่องเนื้อหา (ชายด์โดยตรงของbodyแท็ก) ซึ่งมักใช้พร้อมกับการนำทางมือถือ

.fixed-content {
    position: fixed;
    top: 0;
    bottom:0;

    width: 100vw; /* viewport width */
    height: 100vh; /* viewport height */
    overflow-y: scroll;
    overflow-x: hidden;
}

หวังว่ามันจะช่วยให้ทุกคน ขอบคุณ!

โซลูชันที่นี่ไม่ทำงานสำหรับฉันเนื่องจากฉันจัดแต่งทรงผมตอบสนองต่อองค์ประกอบต่างๆ

สิ่งที่ใช้ได้ผลสำหรับแถบด้านข้างคืออะไร

.sidebar{
position: sticky;
top: 0;
}

หวังว่านี่จะช่วยใครซักคน

ออกจากคำตอบสำหรับทุกคนที่ต้องการทำสิ่งที่คล้ายกัน แต่ไปในทิศทางแนวนอนอย่างที่ฉันต้องการ

Tweaking @ strider820คำตอบเช่นด้านล่างจะทำเวทย์มนตร์:

.fixed-content {        //comments showing what I replaced.
    left:0;             //top: 0;
    right:0;            //bottom:0;
    position:fixed;
    overflow-y:hidden;  //overflow-y:scroll;
    overflow-x:auto;    //overflow-x:hidden;
}

แค่นั้นแหละ. นอกจากนี้ยังตรวจสอบความคิดเห็นที่@trainอธิบายการใช้มากกว่าoverflow:autooverflow:scroll