รหัสอยู่ที่นี่: http://lasers.org.ru/vs/example.html
จะลบพื้นที่ว่างในบล็อกหลัก (#page) ได้อย่างไร?
รหัสอยู่ที่นี่: http://lasers.org.ru/vs/example.html
จะลบพื้นที่ว่างในบล็อกหลัก (#page) ได้อย่างไร?
คำตอบ:
อย่าใช้การวางตำแหน่งสัมพัทธ์ องค์ประกอบยังคงใช้พื้นที่ที่เดิมเมื่อใช้การวางตำแหน่งสัมพัทธ์และคุณไม่สามารถกำจัดสิ่งนั้นได้ ตัวอย่างเช่นคุณสามารถใช้การวางตำแหน่งแบบสัมบูรณ์แทนหรือทำให้องค์ประกอบลอยอยู่ข้างๆกัน
ฉันเล่นกับเค้าโครงเล็กน้อยและฉันขอแนะนำให้คุณเปลี่ยนกฎสามข้อนี้เป็น:
#layout { width: 636px; margin: 0 auto; }
#menu { position: absolute; width: 160px; margin-left: 160px; }
#page { width: 600px; padding: 8px 16px; border: 2px solid #404241; }
เคล็ดลับอีกอย่างที่ใช้ได้ผลดีสำหรับฉันคือการใช้ขอบล่างเชิงลบในองค์ประกอบสัมพัทธ์ที่คุณย้ายไป ไม่จำเป็นต้องไปกับการกำหนดตำแหน่งที่แน่นอน
สิ่งที่ต้องการ:
position: relative;
left: 100px
top: -200px;
margin-bottom: -200px;
คล้ายกัน (ถ้าไม่เหมือนกัน) กับโซลูชันที่ฉันเห็นตอนนี้จากสีเขียว
margin-bottomกับเลขลบเพราะคุณต้องการกำจัดช่องว่างด้านล่าง
#page
{
overflow:hidden;
}
ลองใช้กฎนี้:
#page {
border: 2px solid #404241;
bottom: 0;
padding: 8px 16px;
position: absolute;
top: 70px;
width: 600px;
}
ฉันเปลี่ยนตำแหน่งเป็นค่าสัมบูรณ์สิ่งนี้ช่วยให้คุณใช้bottom: 0คุณสมบัติได้
#page {
padding-bottom: 0;
}

ฉันมีปัญหาที่คล้ายกัน วิธีที่ง่ายที่สุดคือการเปลี่ยนบนสำหรับmargin-top#page
ฉันมีปัญหาเดียวกัน อัตรากำไรเชิงลบไม่ได้ผลสำหรับฉันเพราะมันเหลือพื้นที่สีขาวขนาดใหญ่ที่มันเคยเป็น ฉันแก้ไขปัญหานี้ในกรณีของฉันโดยป้อนความสูงด้วยตนเอง
.maincontent {
height: 675px;
}
คำตอบของฉันช้า แต่อาจช่วยคนอื่น ๆ ที่มีปัญหาคล้ายกันกับฉัน
ผมมี<div>กับposition: relative;ที่ทุกองค์ประกอบของเด็กที่มีposition: absolute;สไตล์ สิ่งนี้ทำให้พื้นที่สีขาวประมาณ20pxปรากฏบนหน้าเว็บของฉัน
เพื่อหลีกเลี่ยงสิ่งนี้ฉันได้เพิ่มmargin-top: -20px;องค์ประกอบพี่น้องถัดไปหลังจาก<div>ด้วยposition: relative;.
หากคุณมีองค์ประกอบพี่น้องมาก่อนคุณสามารถใช้ไฟล์ margin-bottom: -20px;
section {
height: 200px;
}
<h2>Extra Whitespace</h2>
<section>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div style="position:relative;">
<div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
</div>
<div>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</section>
<h2>No Whitespace margin-top</h2>
<section>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div style="position:relative;">
<div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
</div>
<div style="margin-top:-20px;">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</section>
<h2>No Whitespace margin-bottom</h2>
<section>
<div style="margin-bottom:-20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div style="position:relative;">
<div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
</div>
<div>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</section>
ฉันสามารถกำจัดช่องว่างโดยใช้กรอบต่อไปนี้:

และนี่คือมาร์กอัป
<div id="the-force-moved-element>I've been moved</div>
<div id="the-hack-part-1">
<div id="the-hack-part-2>The quick brown fox jumps over the lazy dog</div>
</div>
<p>Lorem ipsum dolor sit amet...</p>
คำถามนี้ดูเหมือนจะตอบได้ดี - อย่างไรก็ตามคำตอบทั้งหมดข้างต้นมีผลข้างเคียงที่ไม่ดีในเค้าโครงของฉัน นี่คือสิ่งที่ได้ผลสำหรับฉันจริงๆ:
.moveUp {
position: relative;
}
.moveUp > * {
position: absolute;
width: 100%;
top: -75px;
}
/** This part is just design - ignore it ... ****/
.box1, .box2, .box3 {
height: 100px;
color: white;
}
.box1 {
background: red;
}
.box2 {
background: blue;
height: 50px;
}
.box3 {
background: green;
}
<div class="box1">Box 1</div>
<div class="moveUp"><div class="box2">Box 2 - 75px up</div></div>
<div class="box3">Box 3</div>
ทางออกที่ดีที่สุดหากคุณไม่ต้องการเว้นช่องว่างด้านล่าง (ญาติ)
คือการใช้ระยะขอบบนและตำแหน่ง: เหนียว
#page {
margin-top: -280px;
position: sticky;
}