ฉันจะทำ width = 100% - 100px ใน CSS ได้อย่างไร

153

ใน CSS ฉันจะทำสิ่งนี้ได้อย่างไร:

width: 100% - 100px;

ฉันเดาว่ามันค่อนข้างง่าย แต่ก็ยากที่จะหาตัวอย่างที่แสดงว่า

html css

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

1

stackoverflow.com/questions/11093943/คำถามที่เชื่อมโยงให้คำตอบที่เข้ากันได้ แต่ไม่ได้ย้อนกลับอย่างสมบูรณ์แบบบางทีคุณอาจต้องการดูด้วยเช่นกัน

— 11684

5

สำหรับทุกคนที่ข้ามคำถามนี้แช้ดตอบว่าเบราว์เซอร์สมัยใหม่รองรับwidth: calc(100% - 100px);คำตอบไม่กี่ข้อและฉันหวังว่าผู้ถามจะอัปเดตคำถามของเขา :) :)

— Anders M.

278

เบราว์เซอร์สมัยใหม่รองรับ:

width: calc(100% - 100px);

หากต้องการดูรายการรุ่นชำระเงินของเบราว์เซอร์ที่รองรับ: ฉันสามารถใช้ calc () เป็นค่าหน่วย CSS ได้หรือไม่

มีทางเลือก jQuery: ความกว้าง css: calc (100% -100px); ทางเลือกโดยใช้ jquery

— ชาด
แหล่งที่มา

13

ฉันพบว่าตอนที่ฉันใช้calc(100% - 6px)ตัวอย่างมันแสดงเป็นcalc(94%)ฉันต้องหนีมันดังนี้และตอนนี้มันก็ใช้งานได้width: calc(~"100% - 6px");

— nsilva

12

ระวังคุณต้องมีช่องว่างรอบตัว-(หรือ+) ตัวอักษร สิ่งนี้ใช้ได้ผลcalc(100% - 100px); และสิ่งนี้ไม่:calc(100%-100px);

— ฟรี

ฉันประหลาดใจเล็กน้อยที่ไม่มีตัวเลือกในการลบ 2x การเติมเต็มขององค์ประกอบโดยอัตโนมัติซึ่งมักจะเป็นกรณีที่ใช้บ่อยๆ เช่นฉันท้ายต้องทำpadding: 0.25em; width: calc(100% - 2 * 0.25em - 2em);และจะต้องเปลี่ยน0.25emในสองสถานที่ตอนนี้หากจะต้องมีการแก้ไข

— cnst

ขอบคุณมากอยากทราบว่ามันใช้งานได้กับ: (100% + 100px)

— Viktor Mellgren

99

คุณอาจจะรัง div ด้วยmargin-left: 50px;และmargin-right: 50px;ภายใน<div>ด้วยwidth: 100%;?

— Aric TenEyck
แหล่งที่มา

4

ความกว้าง: Calc (100% - 100px); นี่คือคำตอบที่ถูกต้องแทน

— Sushan

17

คุณสามารถลอง ...

<!--First Solution-->
width: calc(100% - 100px);
<!--Second Solution-->
width: calc(100vh - 100px);

ขยายตัวอย่างข้อมูล

vw: ความกว้างของวิวพอร์ต

vh: ความสูงวิวพอร์ต

— barışçıracı
แหล่งที่มา

วิธีแก้ปัญหาแรกถูกต้องคอนเทนเนอร์อาจไม่ใช่หน้าต่างดังนั้น 100vh อาจไม่เท่ากับ 100%

— Ben Taliadoros

1

ฉันพบว่าตอนที่ฉันกำลังใช้calc(100% - 6px)งานตัวอย่างมันแสดงเป็นcalc(94%)ฉันต้องหนีมันดังนี้และตอนนี้มันก็ใช้งานได้width: calc(~"100% - 6px");

— nsilva

4

รหัสของฉันและใช้งานได้กับ IE6:

<style>
#container {margin:0 auto; width:100%;}
#header { height:100px; background:#9c6; margin-bottom:5px;}
#mainContent { height:500px; margin-bottom:5px;}
#sidebar { float:left; width:100px; height:500px; background:#cf9;}
#content { margin-left:100px; height:500px; background:#ffa;}

</style>

<div id="container">
  <div id="header">header</div>
  <div id="mainContent">
    <div id="sidebar">left</div>
    <div id="content">right 100% - 100px</div>
  <span style="display:none"></span></div>
</div>

ป้อนคำอธิบายรูปภาพที่นี่

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

6

Javascript นั้นมีไว้เพื่ออะไร

— Faiz

3

คุณต้องมีคอนเทนเนอร์สำหรับ div เนื้อหาของคุณที่คุณต้องการ 100% - 100px

#container {
   width: 100%
}
#content {
   margin-right:100px;
   width:100%;
}

<div id="container">
  <div id="content">
      Your content here
  </div>
</div>

คุณอาจต้องเพิ่ม div การล้างก่อนหน้า div สุดท้าย</div>หาก div เนื้อหาของคุณล้น

<div style="clear:both; height:1px; line-height:0">&nbsp;</div>

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

1

สิ่งนี้จะไม่ทำงาน ความกว้างของเนื้อหาจะเป็น 100%: jsfiddle.net/cuezK/1

— gilly3

2

การตั้งค่าระยะขอบของร่างกายเป็น 0 ความกว้างของคอนเทนเนอร์ภายนอกเป็น 100% และการใช้คอนเทนเนอร์ภายในที่มีระยะขอบซ้าย / ขวา 50px ดูเหมือนว่าจะทำงานได้

<style>
body {
    margin: 0;
    padding: 0;
}

.full-width
{
    width: 100%;
}

.innerContainer
{
    margin: 0px 50px 0px 50px;
}
</style>

<body>
  <div class="full-width" style="background-color: #ff0000;">
    <div class="innerContainer" style="background-color: #00ff00;">
      content here
    </div>
  </div>
</body>

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

2

การทำงานกับพาเนลบู๊ตสแตรปฉันกำลังหาวิธีวางลิงค์ "ลบ" ในแผงส่วนหัวซึ่งจะไม่ถูกบดบังโดยองค์ประกอบเพื่อนบ้านที่มีความยาว และนี่คือทางออก:

HTML:

<div class="with-right-link">
    <a class="left-link" href="#">Long link header Long link header</a>
    <a class="right-link" href="#">Delete</a>
</div>

CSS:

.with-right-link { position: relative; width: 275px; }
a.left-link { display: inline-block; margin-right: 100px; }
a.right-link { position: absolute; top: 0; right: 0; }

แน่นอนคุณสามารถแก้ไขค่า "top" และ "right" ตามการเยื้องของคุณ แหล่ง

— Artur Loginov
แหล่งที่มา

2

มันเริ่มทำงานสำหรับฉันเฉพาะเมื่อฉันตรวจสอบช่องว่างทั้งหมด ดังนั้นจึงไม่ได้ทำงานเช่นนี้width: calc(100%- 20px)หรือและทำงานอย่างสมบูรณ์แบบด้วยcalc(100%-20px)width: calc(100% - 20px)

— อลีนา Babycheva
แหล่งที่มา

1

คุณสามารถทำได้:

margin-right: 50px;
margin-left: 50px;

แก้ไข: โซลูชันของฉันผิด วิธีแก้ปัญหาที่โพสต์โดย Aric TenEyck แนะนำให้ใช้ div ที่มีความกว้าง 100% จากนั้นการซ้อน div อื่นโดยใช้ระยะขอบนั้นจะถูกต้องมากขึ้น

— Tina Orooji
แหล่งที่มา

3

หากคุณทำเช่นนี้คุณจะไม่จบลงด้วยความกว้างทั้งหมดที่เป็น 100% + 100px ใช่ไหม

— Adam Crume

: o (ฉันขอโทษที่ฉันควรลบโพสต์ของฉันหรือฉันควรจะปล่อยให้มันและปล่อยให้ลงคะแนนเสียงผลักดันมันลง.

— ทีน่า Orooji

1

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

— เล็กซ์

@AdamCrume - ไม่ กรณีนี้จะเกิดขึ้นก็ต่อเมื่อคุณระบุwidth:100%เช่นกัน Div จะเติมข้อมูลในคอนเทนเนอร์โดยอัตโนมัติเว้นแต่คุณจะแทนที่เช่นโดยการระบุอย่างชัดเจนwidthหรือโดยการใช้floatหรือการจัดตำแหน่งแบบสัมบูรณ์ การเพิ่มมาร์จิ้นให้กับ div จะทำให้มันเต็มคอนเทนเนอร์น้อยกว่าจำนวนเงินที่ระบุโดยระยะขอบ

— gilly3

@aleemb - ในกรณีนี้ downvotes เกิดจากผู้ใช้ที่ไม่เข้าใจ css เนื่องจากคำตอบนี้ถูกต้องสมบูรณ์

— gilly3

1

การแพ็ดดิง div ด้านนอกจะได้รับเอฟเฟกต์ที่ต้องการ

<html>
<head>
<style>
    #outer{
        padding: 0 50px;
        border:1px solid black; /*for visualization*/
    }

    #inner{
        border:1px solid red; /*for visualization*/
    }
</style>
</head>
<body>
<div id="outer">
    <div id="inner">
        100px smaller than outer
    </div>
</div>
</body>
</html>

— Josh Bush
แหล่งที่มา

1

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

ขนาดกล่อง: ชายแดนกล่องรวมถึงการขยายและความกว้างชายแดนในความกว้างของรายการ ตัวอย่างเช่นหากคุณตั้งค่าความกว้างของ div ด้วยการเว้นช่องว่าง 20px 20px และ 1px border เป็น 100px ความกว้างจริงจะเป็น 142px แต่มี box-box ทั้งช่องว่างภายในและระยะขอบอยู่ภายใน 100px

.bb{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;     
    width: 100%;
    height:200px;
    padding: 50px;
}

นี่คือบทความที่ยอดเยี่ยมเกี่ยวกับมัน: http://css-tricks.com/box-sizing/และนี่เป็นซอhttp://jsfiddle.net/L3Rvw/

แล้วก็มีตำแหน่ง: แน่นอน

.padded{
    position: absolute;
    top: 50px;
    right: 50px;
    left: 50px;
    bottom: 50px;
    background-color: #aefebc;
}

http://jsfiddle.net/Mw9CT/1/

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

— เดฟ
แหล่งที่มา

0

CSS ไม่สามารถใช้ในการเคลื่อนไหวหรือการปรับเปลี่ยนรูปแบบใด ๆ กับกิจกรรม

วิธีเดียวคือการใช้ฟังก์ชั่นจาวาสคริปต์ซึ่งจะคืนค่าความกว้างขององค์ประกอบที่กำหนดจากนั้นลบ 100px ลงไปและตั้งขนาดความกว้างใหม่

สมมติว่าคุณใช้ jQuery คุณสามารถทำสิ่งนี้ได้:

oldWidth = $('#yourElem').width();
$('#yourElem').width(oldWidth-100);

และด้วยจาวาสคริปต์ดั้งเดิม:

oldWidth = document.getElementById('yourElem').clientWidth;
document.getElementById('yourElem').style.width = oldWidth-100+'px';

เราสมมติว่าคุณมีชุดสไตล์ CSS ที่มี 100%

— Boris Guéry
แหล่งที่มา

0

คุณใช้โหมดมาตรฐานหรือไม่ วิธีแก้ปัญหานี้ขึ้นอยู่กับว่าฉันคิดอย่างไร

หากคุณพยายามสร้างคอลัมน์ 2 คอลัมน์คุณสามารถทำสิ่งนี้ได้:

<div id="outer">
    <div id="left">
        sidebar
    </div>
    <div id="main">
        lorem ispsum etc... 
    </div>
</div>

จากนั้นใช้ CSS เพื่อจัดรูปแบบ:

div#outer
{
    width:100%;
    height: 500px;
}

div#left
{
    width: 100px;
    height: 100%;
    float:left;
    background: green;
}

div#main
{
   width: auto;
   margin-left: 100px; /* same as div#left width */
   height: 100%;
   background:red;
}

หากคุณไม่ต้องการคอลัมน์ 2 คอลัมน์คุณสามารถลบได้ <div id="left">

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

0

<div style="width: 200px; border: 1px solid red;">
    <br>
    <div style="margin: 0px 50px 0px 50px; border: 1px solid blue;">
        <br>
    </div>
    <br>
</div>

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

0

คุณสามารถตรวจสอบการใช้LESSซึ่งเป็นไฟล์ JavaScript ที่ประมวลผล CSS ล่วงหน้าของคุณเพื่อให้คุณสามารถรวมตรรกะและตัวแปรไว้ใน CSS ของคุณ ดังนั้นสำหรับตัวอย่างของคุณในน้อยคุณจะเขียนwidth: 100% - 100px;เพื่อบรรลุสิ่งที่คุณต้องการ :)

— จอน
แหล่งที่มา

-1

คุณทำไม่ได้

อย่างไรก็ตามคุณสามารถใช้ระยะขอบเพื่อให้ผลลัพธ์เหมือนกันได้

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

-1

งานนี้:

margin-right:100px;
width:auto;

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

1

คุณช่วยเพิ่มคำอธิบายลงในคำตอบของคุณได้ไหม?

— MichałPerłakowski

ฉันได้ลองแล้ว: คำนวณ (100% -100px) และผลลัพธ์ไม่สอดคล้องกับแพลตฟอร์ม / เบราว์เซอร์ทั้งหมดจากนั้นฉันพยายามลดความซับซ้อนและใช้มาร์จิ้นขวา: 100px; ความกว้าง: อัตโนมัติ; และมันใช้งานได้ ...

— user1552559

calc เป็นองค์ประกอบ CSS3 และ CSS นี้จะทำงานบนเบราว์เซอร์ที่รองรับ CSS3

— Sushan

-2

คำตอบสั้น ๆ คือคุณไม่ได้ทำใน CSS Internet Explorer มีการสนับสนุนสิ่งที่เรียกว่า CSS Expressions แต่นี่ไม่ใช่มาตรฐานและไม่รองรับเบราว์เซอร์อื่นเช่น FireFox

คุณควรทำสิ่งนี้ใน JavaScript

— ประเวศอังยันต์
แหล่งที่มา

ใช่ฉันจะต้องเก็บมันไว้ในจาวาสคริปต์ฉันจะหักเหรหัสและต้องการลบจาวาสคริปต์ที่ทำเช่นนั้น

— fmsf

1

กรุณาถ้าคุณสามารถหลีกเลี่ยงมันไม่ได้ทำใน JavaScript HTML + CSS อาจมีเล่ห์เหลี่ยมและวิธีแก้ปัญหาอาจไม่ชัดเจน แต่มีแนวโน้มที่จะทำเกือบทุกอย่างที่คุณต้องการ การใช้ JavaScript สำหรับรูปแบบสแตติกมักเป็นความคิดที่ไม่ดี

— Nicole