ความกว้างของกอง 100% ลบด้วยจำนวนพิกเซลคงที่

ฉันจะบรรลุโครงสร้างต่อไปนี้โดยไม่ใช้ตารางหรือ JavaScript ได้อย่างไร เส้นขอบสีขาวแสดงถึงขอบของ divs และไม่เกี่ยวข้องกับคำถาม

ขนาดของพื้นที่ตรงกลางจะแตกต่างกันไป แต่จะมีค่าพิกเซลที่แน่นอนและโครงสร้างทั้งหมดควรปรับขนาดตามค่าเหล่านั้น หากต้องการทำให้มันง่ายขึ้นฉันต้องการวิธีตั้งค่าความกว้าง "100% - n px" ให้กับ div ด้านบนกลางและล่างกลาง

ฉันขอขอบคุณโซลูชันข้ามเบราว์เซอร์ที่สะอาดตา แต่ในกรณีที่เป็นไปไม่ได้ CSS แฮ็กจะทำ

นี่คือโบนัส โครงสร้างอื่นที่ฉันพยายามและจบลงด้วยการใช้ตารางหรือ JavaScript มันแตกต่างกันเล็กน้อย แต่แนะนำปัญหาใหม่ ฉันได้ใช้มันเป็นส่วนใหญ่ในระบบหน้าต่างที่ใช้ jQuery แต่ฉันต้องการที่จะไม่ใช้เลย์เอาต์ของสคริปต์และควบคุมขนาดขององค์ประกอบเดียวเท่านั้น (อันกลาง)

คุณสามารถใช้องค์ประกอบที่ซ้อนกันและ padding เพื่อรับขอบซ้ายและขวาบนแถบเครื่องมือ ความกว้างเริ่มต้นของdivองค์ประกอบคือautoซึ่งหมายความว่ามันใช้ความกว้างที่มีอยู่ จากนั้นคุณสามารถเพิ่มช่องว่างภายในองค์ประกอบและยังคงอยู่ในความกว้างที่มีอยู่

นี่คือตัวอย่างที่คุณสามารถใช้สำหรับวางรูปภาพเป็นมุมซ้ายและขวาและภาพกึ่งกลางที่ทำซ้ำระหว่างพวกเขา

HTML:

<div class="Header">
   <div>
      <div>This is the dynamic center area</div>
   </div>
</div>

CSS:

.Header {
   background: url(left.gif) no-repeat;
   padding-left: 30px;
}
.Header div {
   background: url(right.gif) top right no-repeat;
   padding-right: 30px;
}
.Header div div {
   background: url(center.gif) repeat-x;
   padding: 0;
   height: 30px;
}

วิธีใหม่ที่ฉันเพิ่งจะสะดุดเมื่อ: csscalc() :

.calculated-width {
    width: -webkit-calc(100% - 100px);
    width:    -moz-calc(100% - 100px);
    width:         calc(100% - 100px);
}​

ที่มา: ความกว้าง css 100% ลบ 100px

ในขณะที่คำตอบของ Guffa ทำงานได้ในหลาย ๆ สถานการณ์ในบางกรณีคุณอาจไม่ต้องการให้ชิ้นส่วนด้านซ้ายและ / หรือด้านขวาเป็นส่วนย่อยของหน่วยกลาง ในกรณีเหล่านี้คุณสามารถใช้บริบทการจัดรูปแบบบล็อกบนกึ่งกลางและลอย div padding ไปทางซ้ายและขวา นี่คือรหัส

HTML:

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

CSS:

.container {
    width: 100px;
    height: 20px;
}

.left, .right {
    width: 20px;
    height: 100%;
    float: left;
    background: black;   
}

.right {
    float: right;
}

.center {
    overflow: auto;
    height: 100%;
    background: blue;
}

ฉันรู้สึกว่าลำดับชั้นองค์ประกอบนี้เป็นธรรมชาติมากขึ้นเมื่อเปรียบเทียบกับ div ที่ซ้อนกันซ้อนกันและแสดงถึงสิ่งที่อยู่ในหน้าได้ดีขึ้น ด้วยเหตุนี้เส้นขอบช่องว่างภายในและระยะขอบจึงสามารถนำไปใช้กับองค์ประกอบทั้งหมดได้ตามปกติ (เช่น: 'ลักษณะเฉพาะ' นี้มีลักษณะเหนือกว่าสไตล์และมีสาขาย่อย)

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

jsfiddle ที่นี่: jsfiddle.net/RgdeQ

สนุก!

คุณสามารถใช้ประโยชน์จากรูปแบบFlexbox คุณต้องตั้งflex: 1องค์ประกอบที่ต้องมีความกว้างหรือความสูงแบบไดนามิกflex-direction: row and columnตามลำดับ

ความกว้างแบบไดนามิก:

HTML

<div class="container">
  <div class="fixed-width">
    1
  </div>
  <div class="flexible-width">
    2
  </div>
  <div class="fixed-width">
    3
  </div>
</div>

CSS

.container {
  display: flex;
}
.fixed-width {
  width: 200px; /* Fixed width or flex-basis: 200px */
}
.flexible-width {
  flex: 1; /* Stretch to occupy remaining width i.e. flex-grow: 1 and flex-shrink: 1*/
}

เอาท์พุท:

.container {
  display: flex;
  width: 100%;
  color: #fff;
  font-family: Roboto;
}
.fixed-width {
  background: #9BCB3C;
  width: 200px; /* Fixed width */
  text-align: center;
}
.flexible-width {
  background: #88BEF5;
  flex: 1; /* Stretch to occupy remaining width */
  text-align: center;
}

<div class="container">
  <div class="fixed-width">
    1
  </div>
  <div class="flexible-width">
    2
  </div>
  <div class="fixed-width">
    3
  </div>

</div>

ความสูงแบบไดนามิก:

HTML

<div class="container">
  <div class="fixed-height">
    1
  </div>
  <div class="flexible-height">
    2
  </div>
  <div class="fixed-height">
    3
  </div>
</div>

CSS

.container {
  display: flex;
}
.fixed-height {
  height: 200px; /* Fixed height or flex-basis: 200px */
}
.flexible-height {
  flex: 1; /* Stretch to occupy remaining height i.e. flex-grow: 1 and flex-shrink: 1*/
}

เอาท์พุท:

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  color: #fff;
  font-family: Roboto;
}
.fixed-height {
  background: #9BCB3C;
  height: 50px; /* Fixed height or flex-basis: 100px */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flexible-height {
  background: #88BEF5;
  flex: 1; /* Stretch to occupy remaining width */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<div class="container">
  <div class="fixed-height">
    1
  </div>
  <div class="flexible-height">
    2
  </div>
  <div class="fixed-height">
    3
  </div>

</div>

วิธีปกติในการทำเช่นนี้คือ Guffa ซึ่งเป็นองค์ประกอบที่ซ้อนกัน มันเป็นเรื่องน่าเศร้าที่ต้องเพิ่มมาร์กอัปพิเศษเพื่อให้ได้ตะขอที่คุณต้องการสำหรับสิ่งนี้ แต่ในทางปฏิบัติแล้วเสื้อคลุมที่ใช้ห่อหุ้มที่นี่หรือจะไม่มีใครทำร้ายใคร

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

บางทีฉันอาจเป็นคนโง่ แต่ตารางไม่ได้แก้ปัญหาที่ชัดเจนที่นี่?

<div class="parent">
    <div class="fixed">
    <div class="stretchToFit">
</div>

.parent{ display: table; width 100%; }
.fixed { display: table-cell; width: 150px; }
.stretchToFit{ display: table-cell; vertical-align: top}

อีกวิธีที่ฉันคิดได้ในโครเมี่ยมนั้นเรียบง่ายขึ้น แต่ผู้ชายก็แฮ็ค!

.fixed{ 
   float: left
}
.stretchToFit{
   display: table-cell;
   width: 1%;
}

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

เราสามารถทำได้โดยใช้เฟล็กซ์บ็อกซ์อย่างง่ายดาย

ถ้าเรามีองค์ประกอบสามอย่างเช่นส่วนหัว MiddleContainer และส่วนท้าย และเราต้องการให้ความสูงคงที่แก่ส่วนหัวและส่วนท้าย จากนั้นเราสามารถเขียนดังนี้:

สำหรับ React / RN (ค่าเริ่มต้นคือ 'display' as flex และ 'flexDirection' เป็นคอลัมน์) ใน web css เราจะต้องระบุ container body หรือ container ที่บรรจุสิ่งเหล่านี้เป็น display: 'flex', flex-direction: 'column' ชอบด้านล่าง:

    container-containing-these-elements: {
     display: flex,
     flex-direction: column
    }
    header: {
     height: 40,
    },
    middle-container: {
     flex: 1, // this will take the rest of the space available.
    },
    footer: {
     height: 100,
    }

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

ฉันมีปัญหาที่คล้ายกันซึ่งฉันต้องการแบนเนอร์ที่ด้านบนของหน้าจอที่มีภาพหนึ่งภาพด้านซ้ายและภาพซ้ำด้านขวาไปที่ขอบของหน้าจอ ฉันสิ้นสุดการแก้ไขเช่น:

CSS:

.banner_left {
position: absolute;
top: 0px;
left: 0px;
width: 131px;
height: 150px;
background-image: url("left_image.jpg");
background-repeat: no-repeat;
}

.banner_right {
position: absolute;
top: 0px;
left: 131px;
right: 0px;
height: 150px;
background-image: url("right_repeating_image.jpg");
background-repeat: repeat-x;
background-position: top left;
}

กุญแจสำคัญคือแท็กที่ถูกต้อง โดยทั่วไปฉันระบุว่าฉันต้องการให้ทำซ้ำจาก 131px จากซ้ายเป็น 0px จากขวา

ในบางบริบทคุณสามารถใช้การตั้งค่าระยะขอบเพื่อระบุ "ความกว้าง 100% ลบด้วย N พิกเซล" ได้อย่างมีประสิทธิภาพ ดูคำตอบที่ยอมรับสำหรับคำถามนี้