กำหนดความกว้างของ div "ตำแหน่ง: คงที่" ที่สัมพันธ์กับ div ระดับบนสุด

ฉันพยายามกำหนด div (ตำแหน่ง: คงที่) ความกว้าง 100% (เกี่ยวข้องกับ div ระดับบนสุด) แต่ฉันมีปัญหาบางอย่าง ...

แก้ไข: ปัญหาแรกถูกเลื่อนโดยใช้การสืบทอด แต่ก็ยังไม่ได้ผล ฉันคิดว่าปัญหาคือฉันใช้ div หลายตัวที่รับความกว้าง 100% / สืบทอด คุณสามารถพบปัญหาที่สองในการอัปเดต jsfiddle: http://jsfiddle.net/4bGqF/7/

ตัวอย่างสุนัขจิ้งจอก

#container {
    width: 800px;
}

#fixed {
    position: fixed;
    width: 100%;
}

และ html

<div id="container">
    <div id="fixed">Sitename</div>
    <p>
        blaat
    </p>
</div>

หรือคุณสามารถทดลองใช้: http://jsfiddle.net/4bGqF/

ปัญหาที่ดูเหมือนว่าจะเป็นไปได้ว่าองค์ประกอบคงที่อยู่เสมอสละความกว้างของหน้าต่าง / เอกสาร ไม่มีใครรู้วิธีการแก้ไขนี้?

ฉันไม่สามารถกำหนดองค์ประกอบคงที่ของฉันได้เพราะฉันใช้ปลั๊กอิน jScrollPane ขึ้นอยู่กับเนื้อหาว่ามีแถบเลื่อนหรือไม่

ขอบคุณมาก!

PS: ข้อความของ 2 div อยู่ด้านบนของกันและกัน นี่เป็นเพียงตัวอย่างเท่านั้นที่ไม่สำคัญ

ฉันไม่แน่ใจว่าปัญหาที่สองคืออะไร (ขึ้นอยู่กับการแก้ไขของคุณ) แต่ถ้าคุณใช้width:inheritกับ div ภายในทั้งหมดจะใช้งานได้: http://jsfiddle.net/4bGqF/9/

คุณอาจต้องการดูโซลูชันจาวาสคริปต์สำหรับเบราว์เซอร์ที่คุณต้องการรองรับและไม่รองรับ width:inherit

ตามที่หลายคนแสดงความคิดเห็นการออกแบบที่ตอบสนองมักจะกำหนดความกว้างเป็น%

width:inheritจะสืบทอดความกว้าง CSSไม่ใช่ความกว้างที่คำนวณ - ซึ่งหมายความว่าคอนเทนเนอร์ลูกสืบทอดwidth:100%

แต่ฉันคิดว่าชุดการออกแบบที่ตอบสนองได้ดีเกือบเท่าmax-widthกันดังนั้น:

#container {
    width:100%;
    max-width:800px;
}
#contained {
    position:fixed;
    width:inherit;
    max-width:inherit;
}

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

ทั้งผู้ปกครองและเด็กจะปฏิบัติตามwidth:100%หากวิวพอร์ตน้อยกว่าความกว้างสูงสุด ในทำนองเดียวกันทั้งสองจะยึดตามmax-width:800pxเมื่อวิวพอร์ตกว้างขึ้น

มันใช้งานได้กับธีมที่ตอบสนองของฉันอยู่แล้วในลักษณะที่ฉันสามารถเปลี่ยนคอนเทนเนอร์หลักโดยไม่ต้องเปลี่ยนองค์ประกอบลูกคงที่ - สง่างามและยืดหยุ่น

ps: โดยส่วนตัวฉันคิดว่ามันไม่สำคัญเลยสักนิดที่ IE6 / 7 ไม่ได้ใช้ inherit

ตำแหน่งคงที่ค่อนข้างยุ่งยาก (เป็นไปไม่ได้แน่นอน) แต่ตำแหน่ง: เหนียวกำลังทำเคล็ดลับอย่างสวยงาม:

<div class='container'>
  <header>This is the header</header>
  <section>
    ... long lorem ipsum
  </section>
</div>

body {
  text-align: center;  
}

.container {
  text-align: left;
  max-width: 30%;
  margin: 0 auto;
}


header {
  line-height: 2rem;
  outline: 1px solid red;
  background: #fff;
  padding: 1rem;

  position: sticky;
  top: 0;
}

ดูตัวอย่าง codepen

คุณสามารถแก้ได้โดย jQuery:

var new_width = $('#container').width();
$('#fixed').width(new_width); 

สิ่งนี้มีประโยชน์กับฉันมากเพราะเค้าโครงของฉันตอบสนองได้ดีและinheritวิธีแก้ปัญหาก็ไม่ได้ผลกับฉัน!

ใช้ CSS นี้:

#container {
    width: 400px;
    border: 1px solid red;
}

#fixed {
    position: fixed;
    width: inherit;
    border: 1px solid green;
}

#fixed องค์ประกอบจะสืบทอดความกว้างของพาเรนต์ดังนั้นมันจะเท่ากับ 100%

การวางตำแหน่งคงที่ควรจะกำหนดทุกอย่างที่เกี่ยวข้องกับวิวพอร์ตดังนั้นจึงposition:fixedมักจะทำเช่นนั้น ลองใช้position:relativediv ลูกแทน (ฉันรู้ว่าคุณอาจต้องการตำแหน่งคงที่ด้วยเหตุผลอื่น แต่ถ้าเป็นเช่นนั้น - คุณไม่สามารถทำให้ความกว้างตรงกับพาเรนต์โดยไม่มี JS ออกมาได้inherit)

นี่คือการแฮ็กเล็ก ๆ น้อย ๆ ที่เราพบในขณะที่แก้ไขปัญหาการวาดใหม่ในแอปขนาดใหญ่

ใช้-webkit-transform: translateZ(0);กับผู้ปกครอง แน่นอนว่านี่เป็นเรื่องเฉพาะสำหรับ Chrome

http://jsfiddle.net/senica/bCQEa/

-webkit-transform: translateZ(0);

มีวิธีง่ายๆสำหรับเรื่องนี้

ฉันใช้ตำแหน่งคงที่สำหรับ div หลักและความกว้างสูงสุดสำหรับเนื้อหา

คุณไม่จำเป็นต้องคิดมากเกี่ยวกับคอนเทนเนอร์อื่น ๆ เพราะตำแหน่งคงที่สัมพันธ์กับหน้าต่างเบราว์เซอร์เท่านั้น

       .fixed{
            width:100%;
            position:fixed;
            height:100px;
            background: red;
        }

        .fixed .content{
            max-width: 500px;
            background:blue;
            margin: 0 auto;
            text-align: center;
            padding: 20px 0;
        }

<div class="fixed">
  <div class="content">
     This is my content
  </div>
</div>

โซลูชันนี้ตรงตามเกณฑ์ต่อไปนี้

1. อนุญาตให้ใช้ความกว้างเปอร์เซ็นต์บนพาเรนต์
2. ใช้งานได้หลังจากปรับขนาดหน้าต่าง
3. เนื้อหาที่อยู่ใต้ส่วนหัวจะไม่สามารถเข้าถึงได้

เท่าที่ฉันทราบจะไม่สามารถปฏิบัติตามเกณฑ์นี้ได้หากไม่มี Javascript (น่าเสียดาย)

โซลูชันนี้ใช้ jQuery แต่ยังสามารถแปลงเป็น vanilla JS ได้อย่างง่ายดาย:

function fixedHeader(){
  $(this).width($("#wrapper").width());
  $("#header-filler").height($("#header-fixed").outerHeight());
}

$(window).resize(function() {
  fixedHeader();
});

fixedHeader();

#header-fixed{
  position: fixed;
  background-color: white;
  top: 0;
}
#header-filler{
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="header-fixed">
  This is a nifty header! works even when resizing the window causing a line break
</div>
<div id="header-filler"></div>

[start fluff]<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
[end fluff]

</div>

คุณต้องให้สไตล์เดียวกันขององค์ประกอบคงที่และองค์ประกอบระดับบนสุด หนึ่งในตัวอย่างเหล่านี้ถูกสร้างขึ้นโดยมีความกว้างสูงสุดและในอีกตัวอย่างหนึ่งที่มีการพายเรือ

* {
  box-sizing: border-box
}
body {
  margin: 0;
}
.container {
  max-width: 500px;
  height: 100px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: lightgray;
}
.content {
  max-width: 500px;
  width: 100%;
  position: fixed;
}
h2 {
  border: 1px dotted black;
  padding: 10px;
}
.container-2 {
  height: 100px;
  padding-left: 32px;
  padding-right: 32px;
  margin-top: 10px;
  background-color: lightgray;
}
.content-2 {
  width: 100%;
  position: fixed;
  left: 0;
  padding-left: 32px;
  padding-right: 32px;
}

<div class="container">
  <div class="content">
    <h2>container with max widths</h2>
  </div>
</div>

<div class="container-2">
  <div class="content-2">
    <div>
      <h2>container with paddings</h2>
    </div>
  </div>
</div>