ตำแหน่ง Absolute + Scrolling

102

ดังต่อไปนี้HTMLและCSS

.container {
  position: relative;
  border: solid 1px red;
  height: 256px;
  width: 256px;
  overflow: auto;
}
.full-height {
  position: absolute;
  top: 0;
  left: 0;
  right: 128px;
  bottom: 0;
  background: blue;
}

<div class="container">
  <div class="full-height">
  </div>
</div>

ขยายข้อมูลโค้ด

ด้านในdivจะขึ้นเต็มส่วนหัวของภาชนะตามต้องการ ถ้าตอนนี้ฉันเพิ่มอื่น ๆ โฟลว์เนื้อหาลงในคอนเทนเนอร์เช่น:

.container {
  position: relative;
  border: solid 1px red;
  height: 256px;
  width: 256px;
  overflow: auto;
}
.full-height {
  position: absolute;
  top: 0;
  left: 0;
  right: 128px;
  bottom: 0;
  background: blue;
}

<div class="container">
  <div class="full-height">
</div>

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
  maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate
  placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem.
</div>

ขยายข้อมูลโค้ด

จากนั้นคอนเทนเนอร์จะเลื่อนตามที่ต้องการอย่างไรก็ตามองค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนจะไม่ถูกยึดไว้ที่ด้านล่างของคอนเทนเนอร์อีกต่อไป แต่จะหยุดอยู่ที่ด้านล่างที่สามารถดูได้เริ่มต้นของคอนเทนเนอร์ คำถามของฉันคือ; จะมีวิธีของการมีองค์ประกอบตำแหน่งอย่างเป็นความสูงเลื่อนสมบูรณ์ของภาชนะที่ใช้บรรจุโดยไม่ต้องใช้ใด ๆJS?

html css

— คริสใจเย็น
แหล่งที่มา

ขอถามหน่อยได้ไหมว่าทำไมคุณถึงติดอันดับ: 0; มีเช่นกัน?

— Patsy Issa

ไม่มีเหตุผลพิเศษฉันมีนิสัยชอบระบุสิ่งต่างๆมากเกินไป

— Chris Meek

หากคุณลบออกtop: 0;ก็ใช้งานไม่ได้อีกต่อไป

— Brewal

ถ้าไม่มี JS ในการinnerHeightคำนวณมันจะยาก น่าเสียดายที่ใช้position:fixedไม่ได้ในคอนเทนเนอร์เนื่องจากไม่อยู่ในขั้นตอนดังนั้น 'วิธีแก้ปัญหา' นี้จะไม่ทำงานด้วย :(

— RaphaelDDL

90

คุณต้องรวมข้อความไว้ในdivองค์ประกอบและรวมองค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนไว้ด้านใน

<div class="container">
    <div class="inner">
        <div class="full-height"></div>
        [Your text here]
    </div>
</div>

Css:

.inner: { position: relative; height: auto; }
.full-height: { height: 100%; }

การตั้งค่าตำแหน่ง Div ด้านในเพื่อrelativeทำให้องค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนอยู่ในตำแหน่งและความสูงของพวกมันแทนที่จะเป็นบน.containerdiv ซึ่งมีความสูงคงที่ โดยไม่ต้องภายในค่อนข้างตำแหน่งdivที่.full-heightdiv .containerมักจะคำนวณขนาดและตำแหน่งของมันขึ้นอยู่กับ

แสดงข้อมูลโค้ด

* {
  box-sizing: border-box;
}

.container {
  position: relative;
  border: solid 1px red;
  height: 256px;
  width: 256px;
  overflow: auto;
  float: left;
  margin-right: 16px;
}

.inner {
  position: relative;
  height: auto;
}

.full-height {
  position: absolute;
  top: 0;
  left: 0;
  right: 128px;
  bottom: 0;
  height: 100%;
  background: blue;
}

<div class="container">
  <div class="full-height">
  </div>
</div>

<div class="container">
  <div class="inner">
    <div class="full-height">
    </div>

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
    maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio
    cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate
    quidem.
  </div>
</div>

ขยายข้อมูลโค้ด

http://jsfiddle.net/M5cTN/

— giaour
แหล่งที่มา

แน่นอนว่ามันก็สมเหตุสมผลเช่นกัน (ในแบบที่ CSS ใด ๆ สมเหตุสมผล;))

— Chris Meek

7

fill-heightองค์ประกอบชัดเจนเลื่อนที่มีเนื้อหาที่ไม่ OP ต้องการมันจอดทอดสมออยู่? (โดยการเปลี่ยนพื้นหลังสีน้ำเงินเป็นภาพพื้นหลังคุณจะเห็นว่าฉันหมายถึงอะไรเมื่อฉันบอกว่ามันไม่ได้ยึดjsfiddle.net/M5cTN/82 )

— paulvs

35

position: fixed;จะแก้ปัญหาของคุณ ตัวอย่างเช่นตรวจสอบการใช้งานการวางซ้อนพื้นที่ข้อความคงที่ของฉัน (เติมข้อมูลโดยใช้โปรแกรม):

#mess {
    position: fixed;
    background-color: black;
    top: 20px;
    right: 50px;
    height: 10px;
    width: 600px;
    z-index: 1000;
}

และใน HTML

<body>
    <div id="mess"></div>
    <div id="data">
        Much content goes here.
    </div>
</body>

เมื่อ#dataกลายเป็นท่าที่ยาวขึ้น#messให้รักษาตำแหน่งบนหน้าจอในขณะที่#dataเลื่อนไปข้างใต้

— flaschbier
แหล่งที่มา

67

การวางตำแหน่งคงที่จะวางตำแหน่งองค์ประกอบที่สัมพันธ์กับเบราว์เซอร์ซึ่งอาจไม่ใช่ผลลัพธ์ที่ต้องการ

— Avand Amiri

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

— Herbi Shtini

1

transform: translate3d(0,0,0);ในผู้ปกครองจะทำให้เกิดposition: fixedความสัมพันธ์กับผู้ปกครอง ที่มาcoderwall.com/p/2wzj-a/…

— lkraav

9

ดังนั้น gaiour ก็ถูกต้อง แต่ถ้าคุณกำลังมองหารายการความสูงเต็มที่ไม่เลื่อนไปพร้อมกับเนื้อหา แต่จริงๆแล้วคือความสูงของคอนเทนเนอร์นี่คือการแก้ไข มีพาเรนต์ที่มีความสูงซึ่งทำให้เกิดโอเวอร์โฟลว์คอนเทนเนอร์เนื้อหาที่มีความสูง 100% และoverflow: scrollจากนั้นพี่น้องสามารถจัดตำแหน่งตามขนาดพาเรนต์ไม่ใช่ขนาดองค์ประกอบการเลื่อน นี่คือซอ: http://jsfiddle.net/M5cTN/196/

และรหัสที่เกี่ยวข้อง:

html:

<div class="container">
  <div class="inner">
    Lorem ipsum ...
  </div>
  <div class="full-height"></div>
</div>

css:

.container{
  height: 256px;
  position: relative;
}
.inner{
  height: 100%;
  overflow: scroll;
}
.full-height{
  position: absolute;
  left: 0;
  width: 20%;
  top: 0;
  height: 100%;
}

— ทอร์รันซ์
แหล่งที่มา

น่าเสียดายหากตำแหน่ง div สีน้ำเงินอยู่ทางขวาของคอนเทนเนอร์มันจะซ่อนแถบเลื่อน

— papillon

0

ฉันเจอสถานการณ์นี้และการสร้าง div พิเศษนั้นทำไม่ได้ ฉันเพิ่งตั้งค่าไฟล์full-height div เป็นheight: 10000%; overflow: hidden;

เห็นได้ชัดว่าไม่ใช่วิธีการแก้ปัญหาที่สะอาดที่สุด แต่ทำงานได้เร็วมาก

— ทิบอร์อุดวารี
แหล่งที่มา